先列出部分HTML DOM的方法：
createElement：创建一个HTML元素节点；
createTextNode：创建一个HTML文本节点；
appendChild：在指点节点中增加子节点；
insertBefore：在节点的某个子节点前插入子节点。
下面是例子：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="myDiv"> 9 <p id="demo">我的第一个段落。</p> 10 </div> 11 </body> 12 </html>
现在我想在<div id="myDiv">下，p节点的后面再增加一个节点，则需要先创建一个p元素节点，再创建一个文本节点，将文本节点追加到刚才创建的p节点后面，最后将p节点追加到div节点后，代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="myDiv"> 9 <p id="demo">我的第一个段落。</p> 10 </div> 11 12 <script> 13 var para=document.createElement("p"); //创建P元素节点 14 var textnode = document.createTextNode("我的第二个段落"); //创建文本节点 15 var myDiv = document.getElementById("myDiv"); 16 para.appendChild(textnode); //将文本节点追加到元素节点 17 myDiv.appendChild(para); //将元素节点追加到div下 18 </script> 19 20 </body> 21 </html>
运行效果如图：
现在要在“我的第一个段落”前面增加一个段落，代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="myDiv"> 9 <p id="demo">我的第一个段落。</p> 10 </div> 11 <script> 12 var para=document.createElement("p"); 13 var textnode = document.createTextNode("我的第二个段落"); 14 var myDiv = document.getElementById("myDiv"); 15 para.appendChild(textnode); 16 myDiv.appendChild(para); 17 18 var paraThird = document.createElement("p"); 19 var textnodeThird = document.createTextNode("我的第三个段落"); 20 paraThird.appendChild(textnodeThird); 21 myDiv.insertBefore(paraThird,myDiv.childNodes[0]); //在myDiv中的第一个子节点前增加新的子节点paraThird 22 </script> 23 24 </body> 25 </html>
运行结果如下：
