如何使用javascript将元素添加到html答案

【问题标题】：how to add element to html with javascript如何使用javascript将元素添加到html
【发布时间】：2022-07-22 01:01:13
【问题描述】：

如何使用 javascript 将此代码放入 <ul>。

<li>
  <span class="username">nickname:</span> message
</li>

【问题讨论】：

您尝试了哪些方法，哪些没有按预期工作？
我尝试使用 AppendChild 但用户名没有显示出来。
“我尝试使用 AppendChild” - 不是根据问题中显示的代码，你没有。您能否更新问题以将相关代码包含为可运行的minimal reproducible example？ “但用户名没有显示” - 什么用户名？不出现在哪里？请说明问题中的问题。

标签： javascript html html-lists

【解决方案1】：

你可以这样做：

var element = document.getElementById("one");
var newElement = '<div id="two">two</div>'
element.insertAdjacentHTML( 'afterend', newElement )
// new DOM structure: <div id="one">one</div><div id="two">two</div>

我留下参考链接

链接：https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

【讨论】：

【解决方案2】：

如果你的 ul 有一个 id，你可以这样做：

var htmlToAppend = '<li><span class="username">nickname:</span> message</li>'
var element = document.getElementById("list")

element.innerHTML = htmlToAppend

<ul id='list'>

</ul>

其中元素的innerHTML 属性是元素包含的HTML。编辑此属性将立即反映在页面上。

【讨论】：