HTML DOM Range cloneContents() 方法

cloneContents()返回一个 DocumentFragment 对象，该对象复制 Range 中包含的节点和内容。所有范围内容都可以克隆到 DocumentFragment 对象。

cloneContents()方法类似于extractContents()方法，但 extractContents() 方法将内容复制到对象变量并从 DOM 树中删除范围内容，而 cloneContents() 方法将内容复制到对象变量但不删除范围来自 DOM 树的内容。

句法：

documentFragment = range.cloneContents();

参数：此方法不带任何参数。

返回值：此方法返回从 Range 的内容创建的 DocumentFragment 对象。

示例：此示例说明如何使用此方法创建 DocumentFragment对象并将其附加到文档。

HTML

HTML DOM range cloneContents() method   


    GeeksforGeeks
     
This is the Range Content
 
    Click To Clone Contents


    let range = document.createRange();
    let referenceNode = document.getElementsByTagName('p').item(0);
    range.selectNode(referenceNode);
    function clone(){
        documentFragment = range.cloneContents();
        document.body.appendChild(documentFragment);
        console.log(documentFragment)   
    }

输出：

点击按钮前：

点击按钮后：

支持的浏览器：

• 谷歌浏览器
• 边缘
• 火狐
• 苹果浏览器
• 歌剧
• IE浏览器