0

我想在 HTML 的动态列表中显示 HTML 格式的文本。但是，显示的不是格式化文本，而是 HTML 标记。这是代码片段

<!DOCTYPE html>
<html>
<body>

<ul id="myList">
  <li>Tea</li>
  <li>Milk</li>
  <li>Water</li>
</ul>

<p>Click the button to create a LI element.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.createElement("LI");
  var t = document.createTextNode(" I like <i>Coffee</i>");
  x.appendChild(t);
  document.getElementById("myList").appendChild(x);
}
</script>

</body>
</html>

单击 Try it 按钮，您会发现我得到的不是格式化的 HTML，而是在喝咖啡之前得到斜体标签

代码有什么问题？

4

1 回答 1

2

代替 using createTextNode，您可以使用innerHTMLon 元素添加包含 HTML 元素的文本，例如：

  var x = document.createElement("LI");
  x.innerHTML = " I like <i>Coffee</i>";

工作示例：

function myFunction() {
  var x = document.createElement("LI");
  x.innerHTML = " I like <i>Coffee</i>";
  document.getElementById("myList").appendChild(x);
}
<ul id="myList">
  <li>Tea</li>
  <li>Milk</li>
  <li>Water</li>
</ul>

<p>Click the button to create a LI element.</p>
<button onclick="myFunction()">Try it</button>

参考：Mozilla Docs for Element.innerHTML

于 2020-08-07T06:12:18.170 回答