JSFiddle - React, Tailwind, and code Playground
HTML
<div id="phrases">Фраза 1, Фраза 2, Фраза 3</div>
<div id="test"></div>
JavaScript
const SITE_URL = "http://site.ru";
const CONTAINER = document.getElementById("test");
let phrases = document.getElementById('phrases')
.innerHTML
.split(", ");
phrases.forEach(function(phrase, index) {
let link = makeLink(SITE_URL, phrase);
CONTAINER.appendChild(link);
if (!isLastItem(phrases, index)) {
CONTAINER.appendChild( textNode(", ") );
}
});
function makeLink(site, text) {
let a = document.createElement("a");
a.innerHTML = text;
a.href = `${site}/${text}`;
return a;
}
function isLastItem(array, index) {
return index === array.length - 1;
}
function textNode(text) {
return document.createTextNode(text);
}