HTML DOM cloneNode() วิธีการ

เมธอด HTML DOM cloneNode() ใช้สำหรับสร้างสำเนาของโหนดที่กำหนดซึ่งเมธอด cloneNode() ถูกเรียกใช้และส่งคืนโคลน cloneNode() วิธีการโคลนแอตทริบิวต์และค่าทั้งหมดของโหนดที่กำหนด

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับวิธี cloneNode() -

yourNode.cloneNode([deep])

ในที่นี้ deep เป็นพารามิเตอร์ทางเลือก โดยการตั้งค่าเป็น true เราระบุว่าโหนดที่กำหนดและโหนดลูกพร้อมกับแอตทริบิวต์และค่าควรถูกโคลน และโดยการตั้งค่าเป็นเท็จ เราระบุว่าเราต้องการคัดลอกโหนดที่กำหนดและแอตทริบิวต์และค่าเท่านั้น ไม่ใช่โหนดย่อย .

ตัวอย่าง

ให้เราดูตัวอย่างสำหรับ 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>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

HTML DOM cloneNode() วิธีการ

เมื่อคลิกปุ่ม CLONE -

HTML DOM cloneNode() วิธีการ

ในตัวอย่างข้างต้น −

เราได้สร้าง div และมีองค์ประกอบ

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() จะได้รับองค์ประกอบ div โดยใช้เมธอด getElementById() และกำหนดให้กับตัวแปร x จากนั้นเราใช้เมธอด cloneNode(ture) บน

โดยมีพารามิเตอร์ true เพื่อโคลนและองค์ประกอบลูกของมัน และกำหนดให้กับตัวแปรโคลน จากนั้น ตัวแปรโคลนจะถูกผนวกเข้ากับเนื้อหาของเอกสารโดยใช้เมธอด appendChild() -

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