节点操作之1复制节点

最新推荐文章于 2024-05-09 10:19:41 发布

周周_加油

最新推荐文章于 2024-05-09 10:19:41 发布

阅读量429

点赞数 2

分类专栏：前端分享文章标签：前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_46703611/article/details/128687391

版权

前端分享专栏收录该内容

14 篇文章 1 订阅

订阅专栏

node.cloneNode()方法返回调用该方法

//node.cloneNode（）是浅拷贝，只复制标签不复制里面的类容

//node.cloneNode（true）括号里面是true是深拷贝，只复制标签并且复制里面的类容

如果括号里面是false，则是浅拷贝，克隆复制节点本身，不克隆里面的子节点

如果括号参数是true，则是深拷贝，会复制节点本身及里面的所有子节点。

三种动态创建元素的区别

document.write() 页面重绘

直接创建元素如果页面文档流加载完毕，再调用这句话就会页面重绘

2. innerHTML 创建元素

是将内容写入某个dom节点，不会导致页面重绘

创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂

3.document.createElenment()创建元素

创建多个元素效率稍微低一点，但是结构更清晰

总结：不同浏览器下。innerHTML效率要比createEleement高。

下面是一个动态表格的案例供参考

   <style>
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }

        td,
        th {
            border: 1px solid #333;

        }

        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        //先准备好学生的数据
        var datas = [{
            name: '周周',
            subject: 'javascipt',
            score: 100
        },
        {
            name: '镀锌',
            subject: 'javascipt',
            score: 99
        },
        {
            name: '雷哥',
            subject: 'javascipt',
            score: 99
        },
        {
            name: '杰瑞',
            subject: 'javascipt',
            score: 100
        },
        {
            name: '猴鑫',
            subject: 'javascipt',
            score: 98
        },
        {
            name: '瀚文',
            subject: 'javascipt',
            score: 99
        },
        {
            name: '瑶瑶子',
            subject: 'javascipt',
            score: 10
        },
        {
            name: '强哥',
            subject: 'javascipt',
            score: 0
        }];

        //往tababy里面创建行   有几个人创建几行
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) {
            //创建tr行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            //行里面创建单元格   td  单元格的数量取决于每个对象的数量
            for (var k in datas[i]) {//里面的for循环管列
                var td = document.createElement('td');
                //把单元格的属性值给td
                td.innerHTML = datas[i][k];
                tr.appendChild(td);

            }
            //创建有删除两个字的单元格
            var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;">删除</a>'
            tr.appendChild(td);

        }
        //删除操作开始
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function () {
                tbody.removeChild(this.parentNode.parentNode)
            }
        }
    </script>
</body>

周周_加油

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
节点操作之1复制节点

/node.cloneNode（true）括号里面是true是深拷贝，只复制标签并且复制里面的类容。//node.cloneNode（）是浅拷贝，只复制标签不复制里面的类容。如果括号里面是false，则是浅拷贝，克隆复制节点本身，不克隆里面的子节点。如果括号参数是true，则是深拷贝，会复制节点本身及里面的所有子节点。创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂。直接创建元素如果页面文档流加载完毕，再调用这句话就会页面重绘。创建多个元素效率稍微低一点，但是结构更清晰。
复制链接

扫一扫