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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。