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

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

我一直在尝试创建标签列表并使用逗号分隔它们。我正在使用 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);

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

解决方法

如果您的目标是创建多个元素来代替单个元素（具有逗号分隔的标签），那么您需要操作 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>