操作DOM树
方法：
| 方法 | 描述 |
| appendChild() | 将新的子节点添加到指定节点 |
| insertBefore(new,old) | 在指定的节点前面添加新的节点 |
| removeChild() | 删除指定节点的子节点 |
| replaceChild(new,old) | 替换子节点 |
操作：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1 {
width: 200px;
height: 200px;
border: 1px solid red;
}
#div2 {
width: 200px;
height: 200px;
border: 1px dashed blue;
}
</style>
</head>
<body>
<div id="div1">
<ul id="ulId">
<li id="li1">100</li>
<li id="li2">200</li>
<li id="li3">300</li>
<li id="li4">400</li>
</ul>
</div>
<div id="div2"> </div>
<input type="button" value="button" onclick="click1()" />
<script type="text/javascript">
function click1(){
//将新的子节点添加到指定节点
// var ulId = document.getElementById("ulId");
// var div2 = document.getElementById("div2");
//
// div2.appendChild(ulId);
//在指定的节点前面添加新的节点
// var ulId = document.getElementById("ulId");
// var li2 = document.getElementById("li2");
// var li5 = document.createElement("li");
// var text = document.createTextNode("添加的数据");
// li5.appendChild(text);
// ulId.insertBefore(li5,li2);
//删除指定节点的子节点
// var ulId = document.getElementById("ulId");
// var li2 = document.getElementById("li2");
// ulId.removeChild(li2);
//替换子节点
var ulId = document.getElementById("ulId");
var li2 = document.getElementById("li2");
var li5 = document.createElement("li");
var text = document.createTextNode("替换的数据");
li5.appendChild(text);
ulId.replaceChild(li5,li2);
}
</script>
</body>
</html>
补充：
innerHTML属性不仅可以获取指定标签内文本内容，还可以将文本内容和html代码赋值给标签内
var div2 = document.getElementById("div2");
document.write(div2.innerHTML);
var ta = "<table><tr><td>添加的表格</td></tr></table>";
div2.innerHTML = ta;