মেথড cloneNode

মেথড cloneNode একটি এলিমেন্ট ক্লোন করে তার সঠিক কপি পেতে সাহায্য করে। এই কপি তারপর পেজে prepend, append, appendChild, insertBefore বা insertAdjacentElement মেথড ব্যবহার করে ইন্সার্ট করা যাবে।

প্যারামিটারে মেথডটি true অথবা false গ্রহণ করে। যদি true পাস করা হয়, তাহলে এলিমেন্টটি সম্পূর্ণরূপে ক্লোন হয়, সমস্ত অ্যাট্রিবিউট এবং চাইল্ড এলিমেন্টসহ, আর যদি false হয় - শুধুমাত্র এলিমেন্টটি নিজে (চাইল্ড এলিমেন্ট ছাড়া)।

সিনট্যাক্স

element.cloneNode(true or false);

উদাহরণ

elem ক্লাস সহ ব্লকটির একটি কপি তৈরি করি এবং এটিকে #parent ব্লকের শেষে ইন্সার্ট করি:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
</div>

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

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

কোড এক্সিকিউট করার ফলাফল:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
</div>

উদাহরণ

প্রাপ্ত ক্লোনটির সাথে সাধারণ এলিমেন্টের মতো কাজ করা যাবে:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
</div>

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

let clone = elem.cloneNode(true);
clone.children[0].textContent = 'new text1';
clone.children[1].textContent = 'new text2';

parent.appendChild(clone);

কোড এক্সিকিউট করার ফলাফল:

<div id="parent">
	<div class="elem">
		<p>text1</p>
		<p>text2</p>
	</div>
	<div class="elem">
		<p>new text1</p>
		<p>new text2</p>
	</div>
</div>

আরও দেখুন

মেথড createElement,
যার সাহায্যে একটি নতুন এলিমেন্ট তৈরি করা যায়