如何在 HTML 和 Javascript 的动态列表中显示格式化的 HTML 文本

Question

我想在 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>

单击“试用”按钮，您会发现我没有格式化 HTML 我在咖啡前得到斜体标签

代码有什么问题？

Answer 1

您可以在元素上使用 innerHTML 而不是使用 createTextNode 来添加包含 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

如何在 HTML 和 Javascript 的动态列表中显示格式化的 HTML 文本

How to display formatted HTML text in dynamic list in HTML and Javascript

html

javascript

dom

appendchild