js中创建与添加，删除和克隆元素节点

最新推荐文章于 2024-06-25 20:23:09 发布

B·o·T

最新推荐文章于 2024-06-25 20:23:09 发布

阅读量677

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_42837306/article/details/104298941

版权

前端学习专栏收录该内容

26 篇文章 0 订阅

订阅专栏

创建与添加元素节点

 // 1. 创建节点元素节点
var li = document.createElement('li');
// 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素  类似于数组中的push
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3. 添加节点 node.insertBefore(child, 指定元素)，插入在元素节点前;
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);
// 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素

删除元素节点

// 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]);
    }
}

克隆元素节点

var ul = document.querySelector('ul');
// 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
// 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);