note:cloneContents、extractContents、cloneRange()

cloneRange() 创建一个新的range对象，表示与当前的range对象想通的文档区域。

range对象的cloneRange()方法是用于当前的range对象进行复制，该方法返回当前range的对象

语法：cloneRange()

<script>
   function cloneRange(){
      var rangeObj = document.createRange();
      rangeObj.selectNodeContents(document.getElementById("myText"));
      var cloneRange = rangeObj.cloneRange();
      alert(cloneRange.toString());
}
</script>

<p id="myText">Hello World </p>
<input type="button" value="cloneRange" οnclick="cloneRange()">

cloneContents() 返回新的DocumentFragment对象，它包含该范围表示的文档区域的副本。

range对象的cloneContents()方法用于在页面追加一段HTML代码，并且将range对象所代表的区域中的HTML代码克隆到追加到的代码之后

语法：extractContents()

<script>
    function cloneRange(){
       var div = document.getElementById("div");
       var rangeObj = document.createRange();
       rangeObj.selectNodeContents(div);
       var docFrame = rangeObj.cloneContents();
       div.appendChild(docFrame); //appendChild()方法可向节点的子节点列表的末尾添加新的子节点
}
</script>

<div id="div">Hello World! </div>
<input type="button" value="clone" οnclick="cloneRange()">

extractContents()删除当前范围表示的文档区域，并且以documentFragment对象的形式返回那个区域的内容。该方法和cloneContents()方法与deleteContents()方法的组合和相似。

 range对象的extractContents()是用于range对象所代表区域中的html代码克隆岛documentFragment中

<script>
    function moveContent(){
       var srcDiv = document.getElementById("srcDiv");
       var discDiv = document.getElementById("discDiv");
       var rangeObj = document.createRange();
       rangeObj.selectNodeContents(srcDiv);
       var docFragment = rangeObj.extractContents();
       discDiv.appendChild(docFragment);
} 
</script>

<div id="srcDiv" style="background:#CCff33; width:100px; height: 50px;">hello world! </div>
<div id="discDiv" style="background:#00CCFF; width:100px; height:50px;"></div>
<input type="button" value="move element" οnclick="moveContent()">