增加一个元素使用createElement()方法
<p id="demo">单击按钮创建button元素</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){var btn=document.createElement("BUTTON");document.body.appendChild(btn);
};</script>在函数中，我们定义一个btn用来接受一个语句：创建一个按钮，位置在body的最后一个子节点。
增加一个文本节点使用createTextNode()方法
<p id="demo">单击按钮创建文本节点。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){var t=document.createTextNode("Hello World");document.body.appendChild(t);
};</script>和上面例子一样，不过这次我们创建的是一个文本节点。
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul>
<p id="demo">单击该按钮将一个项目从一个列表移动到另一个列表</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){var node=document.getElementById("myList2").lastChild;var list=document.getElementById("myList1");list.insertBefore(node,list.childNodes[0]);
}
</script>点击按钮后，将milk插入到list的第一个子节点。
removeChild() 方法可从子节点列表中删除某个节点。
<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
<p id="demo">单击按钮移除列表的第一项</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){var list=document.getElementById("myList");list.removeChild(list.childNodes[0]);
}
</script>正如标题所示，每点击一次按钮就会删除第一个子节点。