JS节点操作（2）- 创建节点，添加节点，删除节点，复制节点

本文链接：https://blog.csdn.net/Moony_wy/article/details/122806685

节点操作

1. 创建节点

document.createElement()

2. 添加节点

2.1 node.appendChild(child) 添加到子元素数组的末尾

<body>
    <ul>
        <li>I'm here</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        // 创建节点
        var li = document.createElement('li');
        // appendChild() 添加到末尾
        ul.appendChild(li);
        console.log(ul);
    </script>
</body>

以上代码得到结果：

这里我给li加了一个样式list-style: none;去除前面小圆点。我们可以看到创建的li添加到了原有小li的后面。

2.2 node.insertBefore(child, 指定元素) 添加到指定子元素的前面

<body>
    <ul>
        <li>I'm here</li>
        <li>wow</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        // 创建节点
        var li = document.createElement('li');
        // insertBefore() 添加到指定元素的前面
        ul.insertBefore(li, ul.children[1]);
        console.log(ul);
    </script>
</body>

以上代码得到结果：

我们把创建的li添加到了第二个子元素的前面。

3. 删除节点

3.1 node.removeChild(child) 删除指定子节点，返回删除的节点

<body>
    <ul>
        <li>I'm here</li>
        <li>wow</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        // removeChild() 删除节点 返回删除的节点
        ul.removeChild(ul.children[0]);
        console.log(ul);
    </script>
</body>

以上代码得到结果：

第一个子节点被删除了。

4. 复制节点

4.1 cloneNode() 复制节点

复制节点要注意，cloneNode()括号里面为空或者里面是false则为浅拷贝，只复制标签不复制里面的内容。cloneNode(true) 括号里为true则为深拷贝，复制标签和里面的内容。

<body>
    <ul>
        <li>I'm here</li>
        <li>wow</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        // 克隆节点
        // cloneNode()括号里面为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
        // cloneNode(true) 括号里为true 深拷贝 复制标签复制里面的内容
        var li1 = ul.children[0].cloneNode(true);
        var li2 = ul.children[1].cloneNode();
        ul.appendChild(li1);
        ul.appendChild(li2);
        console.log(ul);
    </script>
</body>

以上代码得到结果：