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() মেথড getElementById() মেথড ব্যবহার করে div এলিমেন্টটি পেয়ে ভেরিয়েবল x-এ অ্যাসাইন করে। তারপর <div>-এ cloneNode(true) মেথড ব্যবহার করে প্যারামিটার true দিয়ে সেটি এবং এর চাইল্ড এলিমেন্টগুলো ক্লোন করে ভেরিয়েবল clone-এ অ্যাসাইন করে। clone ভেরিয়েবলটি তারপর document.body-র appendChild() মেথড ব্যবহার করে ডকুমেন্ট বডিতে অ্যাপেন্ড করা হয় -
function CloneEle() { var x = document.getElementById("DIV1"); var clone = x.cloneNode(true); document.body.appendChild(clone); }
