使用 appendchild 或其他方法向 ul 添加 html 代码而不是纯文本？

Question

document.getElementById('addplace').addEventListener('click', function() {
    addplace();
  });

function addplace () {
  var node = document.createElement("li");                 // Create a <li> node
  var textnode = document.createTextNode("<b>Waypoint</b>");         // Create a text node
  node.appendChild(textnode);                              // Append the text to <li>
  document.getElementById("waypoints").appendChild(node);
}

<input type="submit" id="addplace" value="Add One!">  
<ul id="waypoints">
</ul>

我需要它来使 html 代码在每个新的 li 中工作。我也尝试了 innerHTML，但只能添加纯文本。如何使 "Waypoint" 变为粗体而不是显示由 b 标签括起来的文本 "Waypoint"？

它专门用于添加新的 Google Places 自动完成字段和 "x" 的图像以删除 li 所以我正在寻找可以传递值的解决方案/是 JavaScript 对我在 this question.

中提到的应用程序的其余部分很友好

谢谢

Answer 1

不创建文本节点，而是为 <b> 标签创建一个节点并设置其文本内容。

function addplace () {
  var node = document.createElement("li");                 // Create a <li> node
  var textNode = document.createElement("b"); //create a <b> tag
  textNode.textContent = "Waypoint"; //set <b> tag's text
  node.appendChild(textnode);  //Append the <b> tag                            
  document.getElementById("waypoints").appendChild(node);
}

DEMO

如果你想在 li 内设置不同的 html elmenet 而不是 <b> 元素，那么你可以使用下面的

function addplace() {
  var node = document.createElement("li"); // Create a <li> node
  node.innerHTML = "<b>waypoints</b>"               
  document.getElementById("waypoints").appendChild(node);
}

使用 appendchild 或其他方法向 ul 添加 html 代码而不是纯文本？

Adding html code instead of plain text to ul with appendchild or other method?

html

javascript

innerhtml

appendchild

html-lists

DEMO

DEMO