note:cloneContents、extractContents、cloneRange()

来源：互联网发布：预产期的算法编辑：程序博客网时间：2024/06/06 02:54

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" onclick="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" onclick="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" onclick="moveContent()">

0 0