1.appendChild
<div id="app"><p id="p1">这是一个段落。</p><p id="p2">这是另外一个段落。</p></div><script>var p = document.createElement("p"); //创建一个p标签var t = document.createTextNode("这是一个新的段落。");//为 <p> 元素创建一个新的文本节点:p.appendChild(t);var app = document.getElementById("app");//将文本节点添加到 <p> 元素中:app.appendChild(p);//添加到已存在的元素中:</script>
2.insertBefore
<div id="app"><p id="p1">这是一个段落。</p><p id="p2">这是另外一个段落。</p></div><script>var p = document.createElement("p");var t = document.createTextNode("这是一个新的段落。");p.appendChild(t);var app = document.getElementById("app");var p1 = document.getElementById("p1");app.insertBefore(app, p1);</script>
3.replaceChild 替换子节点
var div = document.createElement('div');div.innerText = 'div';ul.replaceChild(div,ul.children[0]); //(替换元素,被替换的元素)