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. windows平台python 2.7环境编译安装zbar

    最近一个项目需要识别二维码,找来找去找到了zbar和zxing,中间越过无数坑,总算基本上弄明白,分享出来给大家. 一.zbar官方介绍 ZBar 是款桌面电脑用条形码/二维码扫描工具,支持摄像头及图 ...

  2. C#读取excl（兼容office多种版本）

    要求:导入excl引用了using System.Data.OleDb,需要安装一个office Microsoft.ACE.OLEDB.12.0 office7以上版本 Microsoft.Jet. ...

  3. JavaScript跨域请求和jsonp请求实例

    <script type="text/javascript" src="./whenReady.js"></script> <sc ...

  4. memcache缓存安装配置

    memcache是高性能,分布式的内存对象缓存系统,用于在动态应用中减少数据库负载,提升访问速度.目前用memcache解决互联网上的大用户读取是非常流行的一种用法. 下载安装 前提要先安装libev ...

  5. GET请求和POST请求的区别

    request获取请求参数 最为常见的客户端传递参数方式有两种: 浏览器地址栏直接输入:一定是GET请求: 超链接:一定是GET请求: 表单:可以是GET,也可以是POST,这取决与<form& ...

  6. JDK动态代理源码学习

    继上一篇博客设计模式之代理模式学习之后http://blog.csdn.net/u014427391/article/details/75115928,本博客介绍JDK动态代理的实现原理,学习一下JD ...

  7. CentOS-7.2安装SQuirreL SQL Client连接Hive

    一,SQuirreL SQL Client干吗的? SQuirreL SQL Client是一款功能强大的服务器配置管理软件,该软件能够帮助用户快速.高效的配置服务器,且支持用户查看数剧库的结构并发出 ...

  8. nodejs 搭建 RESTful API 服务器的常用包及其简介

    常用包 框架: yarn add express 数据库链接: yarn add sequelize yarn add mysql2 处理 favicon: yarn add serve-favico ...

  9. NOIP模拟:能源(二分答案)

    题目描述 小美为了拯救世界能源危机,她准备了 n 台蓄电池.一开始每台蓄电池有 ai 个单位的能量. 现在她想把 n 台蓄电池调整到能量相同.对于每台蓄电池可以给另一台蓄电池传递能量.但是会有能量损耗 ...

  10. PL/SQL入门随笔

    PL/SQL(Procedure Language/SQL) PLSQL是Oracle对sql语言的过程化扩展:在SQL命令语言中增加了过程处理语句(如分支.循环等),使SQL语言具有过程处理能力.S ...