如何添加子节点
代码
<!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 node=document.createElement("LI");
var
//创建新节点并储存在变量node中。
textnode=document.createTextNode("Water");
//创建文本节点并储存在变量textnode中。
node.appendChild(textnode);
//node代表母节点，textnode代表希望添加的节点。
document.getElementById("myList").appendChild(node);
}
</script>
<p><b>注释：</b>首先创建 LI 节点，然后创建文本节点，然后把这个文本节点追加到 LI 节点。最后把 LI 节点添加到列表中。</p>
</body>
</html>
分析
首先createElement创建了一个元素标签。
之后为这个元素创建了文本内容。（文本节点）
最后appendChild() 方法向节点添加最后一个子节点。
也就是把文本内容添加到元素的标签中。
这三句的结果就是做了这么一件事，用html语言级数
<li>Water</li>
接下来还有一件事，就是这句插入到哪里？
document.getElementById("myList").appendChild(node);
这句表明插入的Mylist的最后一行里。
