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. php 时间问题

    获得简单的日期 date() 函数的格式参数是必需的,它们规定如何格式化日期或时间. 下面列出了一些常用于日期的字符: d - 表示月里的某天(01-31) m - 表示月(01-12) Y - 表示 ...

  2. CSS 选择器优先级问题

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  3. Java电器商场小系统--简单的java逻辑

    //商场类public class Goods { int no; //编号 String name; //商品名称 double price; //商品价格 int number; //商品数量 / ...

  4. iOS 实现类似QQ分组样式的几种方式

    思路 思路很简单,对模型数据操作或则控制界面显示 先看下json部分数据 "chapterDtoList": [{ "token": null, "i ...

  5. MongoDB 系列(一) C# 简易入门封装

    之前写过一篇关于MongoDB的封装 发现太过繁琐 于是打算从新写一篇简易版 1:关于MongoDB的安装请自行百度,进行权限认证的时候有一个小坑,3.0之后授权认证方式默认的SCRAM-SHA-1模 ...

  6. TCP服务通讯

    一.TCP 1.TCP又叫做套接字,传输安全,速度慢. TCP和UTP是网络的传输协议,跟java没什么关系,没有说用java做的客户端必须连接java做的服务器,我们可以用c和c++做客户端,直接连 ...

  7. Properties读取属性文件

    import java.util.*;import java.io.*;class PropertiesDemo{ public static void main(String[] args) thr ...

  8. [补] 如何在windows下用IDA优雅调试ELF

    在windows下如何用IDA优雅调试ELF brief: 构建一个IDA-linux_server-docker镜像,优雅地IDA远程调试 使用传统虚拟机来运行一个linux程序就得跑一个完整的li ...

  9. (转)关于java.lang.UnsupportedClassVersionError解决方法总结

    背景:在服务器部署程序是后总是怀疑jdk安装不正确,所以打算运行一个小程序进行测试. 通过这样一个方法 ,可以测试jdk是否正确安装. 1 问题描述 首先编写了个Hello.java的代码: 这里我本 ...

  10. 前端javascript中字符串的总结

    1.截取方法 截取字符串的abcdefg中的efg. 注意:str.length从1的开始数 var str="abcdefg"; (1).slice() : console.lo ...