HTML DOM Range cloneContents()用法及代码示例

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

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

用法:

documentFragment = range.cloneContents();

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

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

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

HTML

<html>
<head>
<title>HTML DOM range cloneContents() method</title>    
</head>
<body>
    <h1>GeeksforGeeks</h1>
     
<p>This is the Range Content</p>
 
    <button onclick="clone()">Click To Clone Contents</button>
</body>
<script>
    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)    
    }
</script>
</html>

输出：

按钮单击之前：

单击按钮后：

支持的浏览器：

谷歌浏览器
Edge
Firefox
Safari
Opera
IE浏览器

相关用法

注：本文由纯净天空筛选整理自taran910大神的英文原创作品 HTML DOM Range cloneContents() method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。