HTML DOM cloneNode()用法及代碼示例

HTML DOM cloneNode() 方法用於創建給定節點的副本，在該節點上調用 cloneNode() 方法並返回克隆。 cloneNode() 方法克隆給定節點的所有屬性和值。

用法

以下是 cloneNode() 方法的語法 -

yourNode.cloneNode([deep])

這裏， deep 是一個可選參數。通過將其值設置為 true，我們指定應該克隆給定節點及其子節點及其屬性和值，通過將其值設置為 false，我們指定我們隻想複製給定節點及其屬性和值，而不是它的子節點.

示例

讓我們看一個 HTML DOM cloneNode() 方法的例子 -

<!DOCTYPE html>
<html>
<head>
<title>CLONE NODE</title>
<style>
h1{color:green;}
h2{ color:blue; }
</style>
</head>
<body>
<div id="DIV1">
<h1> HEADING 1</h1>
<h2> HEADING 2</h2>
</div>
<button onclick="CloneEle()"> CLONE </button>
<script>
   function CloneEle() {
      var x= document.getElementById("DIV1");
      var clone = x.cloneNode(true);
      document.body.appendChild(clone);
   }
</script>
</body>
</html>

輸出

這將產生以下輸出 -

單擊“克隆”按鈕 -

在上麵的例子中 -

我們創建了一個 div 並且裏麵有 <h1< 和 <h2< 元素。 <h1< 和 <h2< 元素有自己的樣式。

h1{color:green;}
h2{ color:blue; }
<div id="DIV1">
<h1> HEADING 1</h1>
<h2> HEADING 2</h2>
</div>

然後我們創建了一個按鈕 CLONE，當用戶點擊時，它將執行函數 CloneEle() -

<button onclick="CloneEle()"> CLONE </button>

CloneEle() 方法將使用 getElementById() 方法獲取 div 元素並將其分配給變量 x。然後我們使用參數為 true 的 <div> 上的 cloneNode(ture) 方法來克隆它及其子元素並將它們分配給變量 clone。然後使用 appendChild() 方法將克隆變量附加到文檔正文 -

function CloneEle() {
   var x= document.getElementById("DIV1");
   var clone = x.cloneNode(true);
   document.body.appendChild(clone);
}

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM cloneNode() method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。