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>

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

JavaScript replace works in console, but not on the website

javascript

replace

console.log