使用 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 的解决方案987654321@.

谢谢

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 elmenets 而不是 <b> 元素，那么您可以使用以下内容，

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

DEMO