标签：文本 替代 节点 color doc foo range orange 添加
1.节点的创建
节点的创建使用document.creatElment();文本节点的创建使用document.creatTextNode();如想把<li>哈密瓜</li>添加到一个如下所示的列表中
<ul id = "fruit">
<li>苹果</li>
<li>橘子</li>
<li>西瓜</li>
<li>梨</li>
</ul>
可添加如下javascript代码
var frNode = document.getElementById("fruit"); var liNode = creatElement("li"); var hmgNode = creatTextNode("哈密瓜"); liNode.appendChild(hmgNode); frNode.appendChild(liNode);
2.节点的替换
节点的替换可使用parentNode.replaceChild(newNode,oldNode);这里的oldNode是将要被替换的节点，newNode是替换的节点，parentNode是oldNode的父节点。示例代码如下
<ul id = "fruit">
<li id = "apple">苹果</li>
<li id = "orange">橘子</li>
<li>西瓜</li>
<li>梨</li>
</ul>
<ul id = "food">
<li id = "biscuit">饼干</li>
<li>米饭</li>
<li>牛肉</li>
<li>面条</li>
</ul>
可添加如下javascript代码
var frNode = document.getElementById("fruit"); var apNode = document.getElementById("apple"); var biNode = document.getElemetnById("biscuit"); frNode.replace(biNode,apNode);
此时苹果被饼干所替代，同时饼干在food列表中被删除。
3.节点的删除
节点的删除使用removeChild(),这里有一个简便的方法删除节点，比如说想要删除上面那个fruit列表中的apple标签，则
var apNode = document.getElementById("apple"); apNode.parentNode.removeChild(apNode);
也就是说要想删除某个节点，可以使用这个节点的父节点的removeChild()方法删除这个节点。
4.节点的插入
节点的插入使用insertBefore(newNode,nextNode)方法,即在某个节点之前插入新节点。比如我们想要在fruit列表中加入food列表中的饼干，则
var frNode = document.getElementById("fruit"); var orNode = document.getElementById("orange"); var biNode = document,getElementById("biscuit"); frNode.insertBefore(biNode,orNode);
这样饼干被加入到fruit列表中，同时在food列表中被删除。
标签：文本 替代 节点 color doc foo range orange 添加
原文地址：http://www.cnblogs.com/hamihua/p/6622869.html
