javascript - 如何在 html 中创建新元素？

Question

我想在单击按钮时创建新元素。我希望我的元素以某种方式呈现。

<ul id="protptypeList">
<li id="element1">
<div style="display: inline-block; width: 33%;">
  <h1>1</h1>
</div>
<div style="display: inline-block; width: 33%;">
  <h1>2</h1>
</div>
<div style="display: inline-block; width: 33%;">
  <h1>3</h1>
</div>
</li>
</ul> 
<div class="btn" onClick="addAnother()"> ADD ELEMENT </div>

我的javascript

addAnother = function() {
var ul = document.getElementById("protptypeList");
var li = document.createElement("li");
var children = ul.children.length + 1
li.setAttribute("id", "element"+children)
li.appendChild(document.createTextNode('<div style="display: inline-block; width: 33%;">'
  +'<h1>1</h1>'
+'</div>'
+'<div style="display: inline-block; width: 33%;">'
  +'<h1>2</h1>'
+'</div>'
+'<div style="display: inline-block; width: 33%;">'
  +'<h1>3</h1>'
+'</div>'));
ul.appendChild(li)
}

这种尝试只给我元素上的文本。

如何创建看起来像旧元素的新元素？

Answer 1

您不能使用 createElement 或 createTextNode 将 HTML 字符串转换为元素。

最简单的方法是简单地设置 innerHTML:

li.innerHTML = "<div style="...">...</div>";

这只会将您的 HTML 放入 li 中。如果您的 li 中已经有其他内容并且您想要添加 HTML，只需执行以下操作:

li.innerHTML += "<div style="...">...</div>";

createTextNode() 不会从文本创建元素，它会创建一个 TextNode，它只是没有元素的简单文本。例如:

Array.prototype.forEach.call(document.querySelector('div').childNodes, el => { console.log( el.nodeType, el.data || el.innerText); });

<div>
 This is a text node
 <p>This is a paragraph</p>
 This is more text
</div>

注意不同的 nodeType 值。 3 是 TEXT_NODE，1 是 ELEMENT_NODE。 createTextNode() 创建第一个类型。