JavaScript替换在控制台中有效，但在网站上无效

Question

我一直在尝试创建一个标签列表，并用逗号分隔它们。我正在使用Webflow，遗憾的是，这在他们的cms中是不可能的。

我想到了一个变通方法，用JavaScript代码替换逗号。

这是代码：

function tags() {
var tag = document.getElementById("tag__wrap").innerHTML;
str = tag.replace(/,/g, '</p><p class="tag__wrap">');
}
tags();
console.log(str);

出于某种原因，当我在控制台中查找时，代码运行良好，但实际上在实际网站上没有显示任何内容。有什么想法吗？

Answer 1

如果您的目标是创建多个元素来代替单个元素(具有逗号分隔的标记(，那么您需要操作DOM。仅仅将HTML分配给字符串变量是不够的。

有很多方法可以做到这一点。这里有一个：

function tags() {
var elem = document.getElementById("tag__wrap");
var tags = elem.textContent.match(/[^,s]+/g) || [];
elem.textContent = tags.shift();
for (let text of tags) {
var newElem = elem.cloneNode();
newElem.textContent = text;
elem.insertAdjacentElement("afterend", newElem);
elem = newElem;
}
}
// Delay the change, so you can see before & after in the snippet
setTimeout(tags, 1000);

#tag__wrap { 
background: lightblue;
display: inline-block;
margin: 5px;
padding: 3px 8px;
border-radius: 4px;
}

<p id="tag__wrap">algorithm,javascript,html,css</p>