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>

[H5]range对象的createRange方法的更多相关文章

  1. [H5]range对象的clone方法

    clone:range对象的克隆; <body> <p id="p">这是一段文字</p> <button onclick="b ...

  2. [H5]range对象之selectNode等方法

    关于range对象的selectNodeContents.selectNode.deleteContents方法 示例代码如下: <!DOCTYPE html> <html lang ...

  3. [H5]range对象的setStart/setEnd方法

    1.setStart:表示某个节点的range对象的起点位置;2.setEnd:表示某个节点的range对象的结束位置; 示例如下:<body> <div id="div& ...

  4. getSelection、range 对象属性，方法理解，解释

    网上转了一圈发现没有selection方面的解释,自己捣鼓下 以这段文字为例子.. <p><b>法国国营铁路公司(SNCF)20日承认,</b>新订购的2000列火 ...

  5. HTML5中的Range对象的研究

    一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var  range = docu ...

  6. HTML5 编辑 API 之 Range 对象（一）

     一.Range 对象基本概念 通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按钮打印出选中内容,当然注意在不同的浏览器下可选中的内容数量是不同的. <!DOCTYPE h ...

  7. HTML5中的Range对象的研究（转载）

    一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var  range = docu ...

  8. [html5] 学习笔记-编辑 API 之 Range 对象（一）

    1.Range对象的基本概念 一个Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改网页上的任何区域. <!DOCTYPE html> <html> & ...

  9. 理解HTML5中Range对象

    1.理解Range对象    重新来学习下HTML5中的Range对象和Selection对象,最近在维护富文本编辑器,感觉这方面的知识点很有用,所以趁着周末多学习下~  什么是Range对象? 在H ...

随机推荐

  1. C#字典转换成where条件

    where 1=1 and Dictionary[key1]=Dictionary[value1] and Dictionary[key2]=Dictionary[value3].... /// &l ...

  2. 【JAVA】配置JAVA环境变量

    系统变量新建,添加 变量名JAVA_HOME 变量值为C:\Java\jdk版本号 修改 Path为 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

  3. 入职15天，Angular2 小记！

    ng 配置@ngModule({ imports: [ BrowserModule ], //导入模块 declarations: [ AppComponent ], //导入组件 providers ...

  4. 标准IO：常用函数集合

    stdio : 标准IO  (1) 流(stream)和文件(file) 流和文件 在Turbo C2.0中是有区别的, Turbo C2.0 为编程者和被访问的设备之间提供了一层抽象的东西, 称之为 ...

  5. jvm007 jvm知识点总览

    转载来自:http://www.ityouknow.com/ 在江湖中要练就绝世武功必须内外兼备,精妙的招式和深厚的内功,武功的基础是内功.对于武功低(就像江南七怪)的人,招式更重要,因为他们不能靠内 ...

  6. CSS 样式书写规范+特殊符号

    虽然我只是刚踏入web前端开发圈子.在一次次任务里头,我发觉每一次的css命名都有所不同和不知所措.脑海就诞生了一个想法--模仿大神的css命名样式. 毕竟日后工作上,是需要多个成员共同协作的.如果没 ...

  7. 计算BMI

    用一个小程序计算BMI 代码如下: package Day06; public class BMI { private String name; private int age; private do ...

  8. 浅谈JVM与内存分配

    一.程序内存分配 初始内存分配 当一个程序准备运行时,它首先向java虚拟机要内存,但是java虚拟机本身没有权限,它只能向操作系统申请内存,此时java虚拟机会拥有一个初始内存, 此处额外说明一下e ...

  9. (转)Java线程：新特征-条件变量

    Java线程:新特征-条件变量   条件变量是Java5线程中很重要的一个概念,顾名思义,条件变量就是表示条件的一种变量.但是必须说明,这里的条件是没有实际含义的,仅仅是个标记而已,并且条件的含义往往 ...

  10. python函数（3）：装饰器

    昨天学了很多函数方面的概念和知识其中有一个闭包的函数.很多人都对闭包的作用不是很清楚,今天我们就来认识一个新的知识点装饰器.它就是闭包函数的一个经典应用. 预习: 编写装饰器,为多个函数加上认证的功能 ...