เมธอด 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>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้ -

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

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

เราสร้าง 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() จะดึงองค์ประกอบ div โดยใช้เมธอด getElementById() และกำหนดให้ตัวแปร x เราจึงใช้เมธอด cloneNode(true) บน <div> พร้อมพารามิเตอร์ true เพื่อโคลนมันและองค์ประกอบลูกของมันและกำหนดให้ตัวแปร clone ตัวแปร clone จึงถูกผนวกกับเนื้อหาเอกสารโดยใช้เมธอด appendChild() -

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