动态生成的html结构 在上面再添加HTML dom

js在特定位置动态添加html可以利用HTML DOM appendChild() 方法。

例子：

var div1 = document.createElement("div")

div1.id = "div1"

var div2 = document.createElement("div")

div2.id ="div2"

document.body.appendChild(div1)

div1.appendChild(div2)

appendChild()定义和用法：

appendChild() 方法向节点添加最后一个子节点。

提示：如果您需要创建包含文本的新段落，请记得添加到段落的文本的文本节点，然后向文档添加该段落。

您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。

从一个列表向另一个列表中移动列表项：

var node=document.getElementById("myList2").lastChild

document.getElementById("myList1").appendChild(node)

document.getElementById("domId").innerHTML="<table><tr><td>123</td></tr></table>"

举个例子：

你把html看做是一个装有行李的行李箱，箱子里外会有各种大小的储物空间，储物空间里可以放东西。那么，这个装有行李的箱子就可以看是html文档，各个储物空间类似于html的闭合的标签，比如<div></div>，箱子里的衣服看做是某个标签中得数据，比如某个标签中的字符串"HELLO

WORLD"。

假设，全球范围内需要使用一种“机器”对过安检的箱子进行检查，检查过程为：打开箱子，分别去各个储物空间把东西拿出来，检查完毕后再把东西放进去。

为了便于各种类型的“机器”能方便的检查行李箱，人类提出了一种可供机器使用的模块，这种模块可以把箱子抽象为一种类似于树的数据结构，所有可以 *** 作这种树形结构的机器，都可以很方便的检查行李箱中得东西。这种模块就类似于DOM。

那么，HTML可以看做是结构性的文本，然后可以将其抽象为DOM类型的模型，这样所有的程序处理模块只要能够处理DOM，那么就可以处理HTML。

总之，你也可以自己通过自己定义的方法去 *** 作HTML文本，但是基于DOM的 *** 作会更加方便，因为你不需要考虑HTML文本的内容格式，你只需要关心结构良好的DOM文档，并且现成的开发接口提供了丰富的DOM *** 作接口。

---