Range對象之cloneRange和cloneContents 代碼效果如下 首次點擊“選擇內容“按鈕提示如下 接著會顯示 最後顯示 以下為整個代碼 看了以上代碼和效果也能知道cloneRange和cloneContents的區別了，最主要的是在實際應用中體會吧. Range對象之extractC ...
Range對象之cloneRange和cloneContents
代碼效果如下
首次點擊“選擇內容“按鈕提示如下
接著會顯示
最後顯示
以下為整個代碼
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> function selectContent() { var element=document.getElementById("divContent"); var rangeObject=document.createRange(); rangeObject.selectNodeContents(element); var objectRange=rangeObject.cloneRange() alert(objectRange.toString()); var objectContent=rangeObject.cloneContents(); alert(objectContent.toString()); element.appendChild(objectContent); } </script> <div id="divContent"> <p>內容</p> </div> <button onclick="selectContent()">選擇內容</button> </body> </html>
看了以上代碼和效果也能知道cloneRange和cloneContents的區別了，最主要的是在實際應用中體會吧.
Range對象之extractContents
效果圖如下
代碼如下
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> function selectContent() { var element=document.getElementById("divContent"); var elementSecond=document.getElementById("divNoContent"); var rangeObject=document.createRange(); rangeObject.selectNodeContents(element); var objectRange=rangeObject.extractContents(); elementSecond.appendChild(objectRange); } </script> <div id="divContent" style="width:200px;height: 100px;background-color: red"> <p>內容</p> </div> <div id="divNoContent" style="width:200px;height: 100px;background-color: green"> </div> <button onclick="selectContent()">選擇內容</button> </body> </html>
extractContens可以實現內容提取.
