জাভাস্ক্রিপ্টে এলিমেন্ট ক্লোনিং

এই পাঠে আমরা এলিমেন্টের কপি পাওয়া শিখব। এই কপিগুলোর সাথে সাধারণ এলিমেন্টের মতো করেই কাজ করা যাবে - সেগুলো পরিবর্তন করা এবং পৃষ্ঠার প্রয়োজনীয় স্থানে সন্নিবেশ করা। এলিমেন্টের কপি পাওয়ার প্রক্রিয়াকে ক্লোনিং বলা হয়।

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

আসুন একটি উদাহরণ দেখি। আমাদের কাছে এইরকম কোড আছে:

html<div id="parent">
  <div class="elem">
    <p>প্রথম অনুচ্ছেদ</p>
    <p>দ্বিতীয় অনুচ্ছেদ</p>
  </div>
</div>

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

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

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

ফলস্বরূপ নিম্নলিখিতটি পাওয়া যাবে:

html<div id="parent">
  <div class="elem">
    <p>প্রথম অনুচ্ছেদ</p>
    <p>দ্বিতীয় অনুচ্ছেদ</p>
  </div>
  <div class="elem">
    <p>প্রথম অনুচ্ছেদ</p>
    <p>দ্বিতীয় অনুচ্ছেদ</p>
  </div>
</div>