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

时间：2022-10-18 03:23:32

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

相关文章