1、元素的创建
（1）document.createElement()
作用：创建元素对象
（2）document.createTextNode()
作用：创建文本对象
2、元素的添加
（1）[context].appendChild([element])
作用：把元素添加到容器的末尾
（2）[context].insertBofore([新增元素], [指定容器])
作用：把元素添加到指定容器中指定元素的前面
<!DOCTYPE html>
<html>
<body>
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p id="demo">请点击按钮向列表插入一个项目。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction() {
var newItem=document.createElement("LI")
var textnode=document.createTextNode("Water")
newItem.appendChild(textnode)
var list=document.getElementById("myList")
list.insertBefore(newItem,list.childNodes[0]);
}
</script>
<p>
<b>注释：
</b>
<br>首先请创建一个 LI 节点，
<br>然后创建一个文本节点，
<br>然后向这个 LI 节点追加文本节点。
<br>最后在列表中的首个子节点之前插入此 LI 节点。
</p>
</body>
</html>
3、元素的克隆
[element].cloneNode(true/flase)
作用：克隆元素或者节点，true表示深克隆，false表示浅克隆
4、元素的移除
[context].removeChild([element])
作用：移除容器中的某个元素
