如何在 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>

单击 Try it 按钮，您将观察到，我没有得到格式化的 HTML，而是在咖啡前得到斜体标签

代码有什么问题？

Answer 1

除了使用createTextNode ，您可以在元素上使用innerHTML来添加包含 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 文本

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-08-07 06:12:18

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-08-07 06:12:18

解决方案1
2 已采纳 2020-08-07 06:12:18