[H5]range对象的createRange方法

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>

 

posted @ 2017-02-09 14:37  Aqiaoba  阅读(1824)  评论(0)  编辑  收藏  举报