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

Posted 2023-05-07

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

【英文标题】：Adding html code instead of plain text to ul with appendchild or other method?

【发布时间】：2016-07-31 13:08:03

【问题描述】：

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@.

谢谢

【参考方案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

【讨论】：

谢谢我需要它来为 html 工作，而不仅仅是 b 标签。虽然我会玩这个，看看它是否适用于输入标签以及输入+img。

谢谢拉贾帕布。我可以在没有任何属性的情况下添加 ，但是当我尝试 例如时，按钮将停止创建新的 li 元素。知道为什么会发生这种情况或如何解决它吗？如果这是一个更好的方法，我可以发布一个新问题。

@javaandy 您可以为此创建一个新问题，因为它超出了当前问题的范围。如果你愿意，可以把这个问题的链接分享给我。

谢谢***.com/questions/36532484/…

@javaandy 我回答了这个问题。这对你有帮助吗？