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. Vulkan Tutorial 26 view and sampler

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 在本章节我们将为图形管线创建另外两个资源来对图像进行采样.第一个资源我们之前已经接触 ...

  2. 拥抱.NET Core系列：Logging (1)

    在之前我们简单介绍了 .NET Core 中的 DI组件,没来及了解的童鞋可以翻翻我之前的文章. 接下来会对 .NET Core 中的 Logging 进行介绍. 本文中使用了"Micros ...

  3. Cent-Linux腾讯课堂学习笔记

    RedHat yum系统下 防火墙 关闭防火墙方法 systemctl stop firewalld 检测防火墙状态 systemctl status firewalld 设置防火墙禁用开机启动 sy ...

  4. Android Bitmap 常见的几个操作：缩放，裁剪，旋转，偏移

    Android Bitmap 相关操作 常见的几个操作:缩放,裁剪,旋转,偏移      很多操作需要 Matrix 来支持:Matrix 通过矩阵来处理位图,计算出各个像素点的位置,从而把bitma ...

  5. 本地Server发布外网Web应用（Oray实现）

    主要讲解如何将本地当做服务器,发布Web应用至外网访问.   准备条件: 1.web应用服务(此处为Tomcat作为web应用服务器): 2.花生壳应用:   第一步,正常搭建本地web项目,应用名为 ...

  6. ABP从入门到精通（2）：aspnet-zero-core 使用MySql数据库

    关于 asp.net zero core 项目的启动及说明,请观看我前面的博文 http://www.cnblogs.com/stulzq/p/7237153.html 本操作对于ABP默认项目应该也 ...

  7. （转）关于eclipse的TestNG的插件安装方法

    背景:最近在学习spring 4.x时候,用到了testNG的测试方法,发现需要在eclipse安装testNG插件才能够正常进行单元测试. 1 插件安装 今天在配置eclipse+selenium+ ...

  8. 一份关于npm的新手指南

    Node.js使得在服务器端使用JavaScript编写应用程序成为可能.它是基于V8Javascript运行时并且使用C++编写的,所以它的速度很快.最初,它旨在作为应用程序的服务器环境,但是开发人 ...

  9. linux的文件权限与目录配置<----->第二章

    1.Linux文件属性    [   1  ]                  [   2  ] [    3    ]  [    4    ]  [ 5 ]             [ 6 ] ...

  10. 安装完ubuntu16.4.0之后要做的一些优化

    1.删除libreoffice libreoffice虽然是开源的,但是Java写出来的office执行效率实在不敢恭维,装完系统后果断删掉 sudo apt-get remove libreoffi ...