2016年5月13日学习笔记

最新推荐文章于 2024-07-02 14:26:45 发布

老施同学

最新推荐文章于 2024-07-02 14:26:45 发布

阅读量247

点赞数

本文链接：https://blog.csdn.net/guofengs/article/details/51394342

版权

个人总结专栏收录该内容

34 篇文章 0 订阅

订阅专栏

</pre><p>1.关于cloneRange()和cloneContents()</p><p>cloneRange是创建一个新的range对象，表示与当前range对象相同的区域</p><p></p><pre code_snippet_id="1681934" snippet_file_name="blog_20160513_2_4163126" name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 编辑 API 之 Range 对象（二）</title>
</head>
<body>
    <p id="p">这是用来克隆的文本</p>
    <div id="div1"></div>
    <button οnclick="cloneRange()">clone</button>

    <div id="div2">
        哈哈哈哈
    </div>
    <button οnclick="cloneContent()">clone</button>
    <script>
        function cloneRange() {
            var rangeObj = document.createRange();
            var p = document.getElementById("p");
            rangeObj.selectNodeContents(p);
            var rangeClone = rangeObj.cloneRange();
            var div = document.getElementById("div1");
            //alert(rangeClone.toString());
            div.innerHTML = rangeClone;
        }
        function cloneContent(){
            var div = document.getElementById("div2");
            var rangeObj = document.createRange();
            rangeObj.selectNodeContents(div);
            var documentFragmengt = rangeObj.cloneContents();
            div.appendChild(documentFragmengt);
        }
    </script>
</body>
</html>

cloneContents是把range内容复制到一个DocumentFragment中

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

例：

function moveContent(){
            var div3 = document.getElementById("div3");
            var div4 = document.getElementById("div4");
            var rangeObj = document.createRange();
            rangeObj.selectNodeContents(div3);
            var del = rangeObj.extractContents();
            div4.appendChild(del);
        }

selection = document.getSelection;

selection.getRangeAt()

function insert(){
            var btn = document.getElementById("btn");
            var selection = document.getSelection();
            if(selection.rangeCount>0){
                var range = selection.getRangeAt(0);
                range.insertNode(btn);
            }
        }

老施同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2016年5月13日学习笔记

1.关于cloneRange()和cloneContents()cloneRange是创建一个新的range对象，表示与当前range对象相同的区域 HTML5 编辑 API 之 Range 对象（二）这是用来克隆的文本 clone 哈哈哈哈 clone funct
复制链接

扫一扫

专栏目录