[H5]range对象的createRange方法

最新推荐文章于 2024-07-18 14:03:51 发布

weixin_30951743

最新推荐文章于 2024-07-18 14:03:51 发布

阅读量134

点赞数

原文链接：http://www.cnblogs.com/chooper/p/6382035.html

版权

range对象的extractContents()方法:

extractContents() 方法删除文档内容，并以 DocumentFragment 对象的形式返回它;

DocumentFragment配合range对象:相当于剪切、复制、粘贴其子孙节点

<body>
    <div id="div1" style="background: greenyellow;width: 200px; height:100px;">这里有一段文字</div>
    <div id="div2" style="background: #faed98;width: 200px; height:100px;"></div>
    <button onclick="btn()">转移</button>
    <script>
        function btn() {
            var div1=document.getElementById("div1");
            var div2=document.getElementById("div2");
            var rangeObj=document.createRange();
            rangeObj.selectNodeContents(div1);
            docFragment=rangeObj.extractContents();
            div2.appendChild(docFragment);
        }
    </script>
</body>