HTML DOM Range extractContents() 方法

extractContents()方法将Range的内容从文档树移动到文档对象变量中。 Range的内容从文档树中删除。

extractContents()方法类似于cloneContents()方法。 extractContents()方法从 Range 对象的内容创建一个DocumentFragment 对象，并从文档树中删除 Range 的内容。

句法：

documentFragment = range.extractContents();

参数：此方法不接受任何参数。

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

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

HTML

  

    
        HTML DOM range extractContents() method
    

  

    GeeksforGeeks
  
    RANGE CONTENT
  
  
    
        Click to Extract the Range
    
  
    
        Below is extracted range: 
    
  
    
        var range = document.createRange();
  
        range.selectNode(document
            .getElementsByTagName("p").item(0));
  
        const element = 
            document.getElementById('element');
  
        function extract() {
            var documentFragment = 
                    range.extractContents();
                      
            console.log(documentFragment);
            element.appendChild(documentFragment);
        }
    

  

输出：

• 点击按钮前：

  

• 点击按钮后：

  

支持的浏览器：

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