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()创建第一种类型。

如何在html中创建新元素？

1 个答案: