ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

JavaScript第六天笔记02——克隆节点

2021-08-04 18:59:09  阅读:137  来源: 互联网

标签:02 title JavaScript list var 第六天 wrap copyNode con


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <ul id="wrap">
            <li>
                <h6>title</h6>
                <p>0</p>
            </li>
        </ul>
        <script>
            var list=[
                {
                    title:'title1',
                    con:'1'
                },
                {
                    title:'title2',
                    con:'2'
                },
                {
                    title:'title3',
                    con:'3'
                },
                {
                    title:'title4',
                    con:'4'
                },
                {
                    title:'title5',
                    con:'5'
                },
                {
                    title:'title6',
                    con:'6'
                }
            ]
            var wrap = document.getElementById('wrap');
            for(var i = 0; i < list.length; i++){
                var copyNode = wrap.children[0].cloneNode(true);
                copyNode.children[0].innerHTML = list[i].title;
                copyNode.children[1].innerHTML = list[i].con;
                wrap.append(copyNode);
            }
       </script>
    </body>
</html>

节点.cloneNode(布尔值)

当布尔值为true时,复制当前节点的所有子孙节点。

当布尔值为false时,只复制当前节点

效果图

 

 

标签:02,title,JavaScript,list,var,第六天,wrap,copyNode,con
来源: https://blog.csdn.net/weixin_43861647/article/details/119390797

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有