在完成这个案例之前要清楚DOM解析html文件的过程。解析的过程类似于一个树。称之为DOM树
首先树的根节点是文件的最外层的标签，然后根节点的子节点是最外层标签的第一个内标签....依此类推。
也就是DOM树的叶子结点一定是HTML文件的最内层标签。
题目：
在<ul>标签末尾添加一个新的li标签。
分析：
第一步，无论进行什么操作，需要先获取原来的ul标签。var ul1=document.getElementById("ul1");
第二步，新建一个li标签 var li1=document.createElement("li");
第三步，创建标签内的文本 var text1=document.createTextNode("555");
第四步，将文本添加到新建的li标签内 li1.appendChild(text1);
第五步，将新建的li标签添加到原来的ul标签内 ul1.appendChild(li1);
<html>
<head>
<title>html示例</title>
</head>
<body>
<ul id="ul1" >
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<br/>
<input type="button" value="add" onclick="add1();"/>
<script type="text/javascript">
function add1(){
var ul1=document.getElementById("ul1");
//创建一个新的li标签
var li1=document.createElement("li");
//创建文本
var text1=document.createTextNode("555");
//将文本添加到li标签内
li1.appendChild(text1);
//将新建的标签添加到原来的ul标签内
ul1.appendChild(li1);
}
</script>
</body>
</html>