删除现有节点的语法为：
父节点.removeChild(子节点);
节点不能“自杀”，要删除一个节点，必须通过调用它的父节点的 removeChild()方法来删除它。比如 oBox
要删除自己的第 1 个子节点：
oBox.removeChild(oBox.childNodes[0]);
看一个案例演示，HTML 结构如下：
<ul id="list">
<li>北京 <button>删除</button></li>
<li>上海 <button>删除</button></li>
<li>广州 <button>删除</button></li>
</ul>
程序中放置了一个 ul 列表，列表中有一些列表项，每个列表项内都有一个按钮。
请实现效果：单击删除按钮，删除它所在的 li 标签。
JavaScript 代码如下：
<script type="text/javascript">
var oUl = document.getElementById("list");
var oButtons = oUl.getElementsByTagName("button");
//给所有按钮添加监听
for(var i = 0 ; i < oButtons.length ; i++){
oButtons[i].onclick = function(){
//让 oUl 节点删除点击的这个按钮的父节点
oUl.removeChild(this.parentNode);
}
}
</script>
在事件处理函数中 this 表示触发事件的元素，即“给谁添加监听，this 就是谁”。由于监听是给 button
按钮添加的，所以事件处理函数中的 this 是指用户点击的 button 按钮，进而 this.parentNode 就是用户点
击的这个按钮的父元素 li 标签。
节点不能“自杀”，要想删除 li 标签，必须使用 li 标签的父元素 oUl 来删除它。这就是这行代码的意义：
oUl.removeChild(this.parentNode)
移动节点
appendChild()方法也可以用来移动节点。当一个现有节点被重新追加到另一个父节点中时，此时这个节
点将被移动位置。例如：
<!DOCTYPE html>
<head>
<meta charset=UTF-8>
<title>Document</title>
</head>
<body>
<div id="box1">
<p id="para"></p>
</div>
<div id="box2"></div>
<script type="text/javascript">
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var para = document.getElementById("para");
box2.appendChild(para);
</script>
</body>
</html>
本来 p#para 节点是 box1 的子节点，但 JavaScript 程序让它重新被追加到了 box2 盒子上，此时它将被
移动位置。节点被重复 appendChild()会被移动位置的原理很简单：任何一个节点在 DOM 节点树上只能有一个
位置，不能同时拥有两个位置。
打开浏览审查元素功能的“Elements”面板，发现 para 标签已经被移动到 box2 内部了
