Javascript-Dom-克隆 

<body>
        <input type="button" name="" value="Clone" onclick="copy()" />
        <hr width="245px" size="1" align="left" />
        <input type="text" name="" value="" id="txt" />
        <ol id="oList">
            <li>Black metal</li>
            <li>Alternative metal</li>
            <li>Thrash metal</li>
            <li>Doom metal</li>
            <li>Classical metal</li>
            <li>Gothic metal</li>
        </ol>
    </body>
<script type="text/javascript">
        function copy(){
            var oList = document.getElementById("oList");
            var oListCopy = oList.cloneNode(true);
            document.body.appendChild(oListCopy);
        }
    </script>

注意：
（1）和createElement一样，cloneNode创建的节点只是游离有html文档外的节点，要调用appendChild方法才能添加到文档树中。
（2）如果复制的元素有id，则其副本同样会包含该id，由于id具有唯一性，所以在复制节点后必须要修改其id。
（3）调用接收的bool参数最好传入，如果不传入该参数，不同浏览器对其默认值的处理可能不同。

如果被复制的节点绑定了事件，则副本也会跟着绑定该事件吗？这里要分情况讨论：
（1）如果是通过addEventListener或者比如onclick进行绑定事件，则副本节点不会绑定该事件。
（2）如果是内联方式绑定比如<xmp><div onclick="showParent()"></div></xmp>这样的话，副本节点同样会触发事件。

posted @ 2017-01-12 17:07  Western_Journalist  阅读(371)  评论(0)  编辑  收藏  举报