JavaScript节点操作--创建节点、添加节点、删除节点、复制节点

喜欢ヅ旅行 2022-12-23 06:13 143阅读 0赞

# 节点操作 #

### 创建节点 ###

document.createElement('tagName')

document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也成为动态创建元素节点。

### 添加节点 ###

node.appendChild(child)

node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css中的after伪元素。

<body>
        <ul>
            
        </ul>
        <script>
        	//创建元素节点
            var li =document.createElement('li');
            //添加节点
            var ul = document.querySelector('ul');
            ul.appendChild(li);
        </script>
    </body>

node.insertBefore(child,指定元素)

node.insertBefore()方法将一个节点添加到父节点的指定子节点前面。

var lili = document.createElement('li');
    ul.insertBefore(lili,ul.children[0]);

### 删除结点 ###

node.removeChild(child);

node.removeChild()方法从DOM中删除一个子节点，返回删除的结点。

<body>
        <ul>
            <li>第一个</li>
            <li>第二个</li>
            <li>第三个</li>
        </ul>
        <script>
        	var ul = document.querySelector('ul');
            ul.removeChild(ul.child[0]);
        </script>
    </body>

### 复制结点 ###

node.cloneNode();

node.cloneNode()方法返回调用该方法的结点的一个副本。也称为克隆节点或者拷贝节点。括号里面为空或者false为浅拷贝，只复制结点不复制内容。括号里面为true为深拷贝，复制节点，复制内容

<body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul> 
        <script>
        	var ul = document.querySelector('ul');
            var lili = ul.children[0].cloneNode(true);
            ul.appendChild(lili);
        </script>
    </body>