JavaScript之节点的创建替换删除插入

Posted 2020-09-06 脚踏实地，仰望星空

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列表中被删除。