节点操作----- 删除节点

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<button>删除</button>
<ul>
    <li>熊大</li>
    <li>熊二</li>
    <li>光头强</li>
</ul>
<script>
    // 1.获取元素
    var ul = document.querySelector('ul');
    var btn = document.querySelector('button');
    // 2. 删除元素  node.removeChild(child)
    // ul.removeChild(ul.children[0]);
    // 3. 点击按钮依次删除里面的孩子
    btn.onclick = function() {
        if (ul.children.length == 0) {
            this.disabled = true;
        } else {
            ul.removeChild(ul.children[0]);
        }
    }
</script>

  

复制(克隆)节点

 

 

1
2
3
4
5
6
7
8
9
10
11
12
<ul>
     <li>1111</li>
     <li>2</li>
     <li>3</li>
 </ul>
 <script>
     var ul = document.querySelector('ul');
     // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
     // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
     var lili = ul.children[0].cloneNode(true);
     ul.appendChild(lili);
 </script>

  

 

posted @   Harry宗  阅读(437)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
点击右上角即可分享
微信分享提示