Javascript 如何在html中创建新元素？

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

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

1.
2.
3.


添加元素

我的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)
}

addother=function（）{
var ul=document.getElementById（“protptypeList”）；
var li=document.createElement（“li”）；
var children=ul.children.length+1
li.setAttribute（“id”、“元素”+子元素）
li.appendChild（document.createTextNode（“”）
+'1'
+''
+''
+'2'
+''
+''
+'3'
+''));
ul.儿童（李）
}

这次尝试只将其作为元素上的文本提供给我

---

如何创建与旧元素类似的新元素？

您不能使用

createElement

或

createTextNode

将HTML字符串转换为元素

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

innerHTML

：

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

createTextNode（）

不是从文本创建元素，而是创建一个

TextNode

，它只是一个没有元素的文本。例如：

Array.prototype.forEach.call（document.querySelector（'div'）.childNodes，el=>{console.log（el.nodeType，el.data | | el.innerText）；}）

这是一个文本节点
这是一段

这是更多的文本
createTextNode
正是创建了一个文本节点。。。你可以做
li.insertAdjacentHTML（'beforeed'，“你的html在这里”）
。。。或者你可以只
li.innerHTML=“你的html在这里”
。。。也可以像创建
li
li.innerHTML += "<div style="...">...</div>";