जावास्क्रिप्ट पर एलिमेंट्स का क्लोनिंग

इस पाठ में हम एलिमेंट्स की प्रतिलिपियाँ प्राप्त करना सीखेंगे। इन प्रतिलिपियों के साथ सामान्य एलिमेंट्स की तरह काम किया जा सकता है - उन्हें बदलना और पृष्ठ पर सही जगह में डालना। एलिमेंट्स की प्रतिलिपियाँ प्राप्त करने की प्रक्रिया को क्लोनिंग कहा जाता है।

एलिमेंट को cloneNode मेथड की मदद से क्लोन किया जा सकता है। इस मेथड में पैरामीटर के रूप में true या false पास करना होता है। यदि true पास किया गया है, तो एलिमेंट पूरी तरह से क्लोन हो जाता है, सभी एट्रिब्यूट्स और चाइल्ड एलिमेंट्स के साथ, और यदि false - केवल स्वयं एलिमेंट।

आइए एक उदाहरण पर देखें। मान लीजिए हमारे पास इस प्रकार का कोड है:

<div id="parent">
	<div class="elem">
		<p>पहला पैराग्राफ</p>
		<p>दूसरा पैराग्राफ</p>
	</div>
</div>

आइए elem क्लास वाले ब्लॉक की एक प्रतिलिपि बनाएं और उसे #parent ब्लॉक के अंत में डालें:

let parent = document.querySelector('#parent');
let elem = parent.querySelector('.elem');

let clone = elem.cloneNode(true);
parent.appendChild(clone);

परिणामस्वरूप, यह प्राप्त होगा:

<div id="parent">
	<div class="elem">
		<p>पहला पैराग्राफ</p>
		<p>दूसरा पैराग्राफ</p>
	</div>
	<div class="elem">
		<p>पहला पैराग्राफ</p>
		<p>दूसरा पैराग्राफ</p>
	</div>
</div>

एक इनपुट दिया गया है। एक बटन दिया गया है। बटन पर क्लिक करने पर इस इनपुट को क्लोन करें।