HTML DOM cloneNode() পদ্ধতি

HTML DOM cloneNode() পদ্ধতিটি একটি প্রদত্ত নোডের একটি অনুলিপি তৈরি করার জন্য ব্যবহৃত হয় যার উপর cloneNode() পদ্ধতিটি কল করা হয় এবং এটি ক্লোনটি ফেরত দেয়। cloneNode() পদ্ধতি একটি প্রদত্ত নোডের সমস্ত বৈশিষ্ট্য এবং মান ক্লোন করে।

সিনট্যাক্স

cloneNode() পদ্ধতি -

-এর জন্য সিনট্যাক্স নিচে দেওয়া হল

yourNode.cloneNode([deep])

এখানে, গভীর একটি ঐচ্ছিক পরামিতি। এর মান সত্য সেট করে আমরা নির্দিষ্ট করি যে প্রদত্ত নোড এবং এর বাচ্চাদের তাদের বৈশিষ্ট্য এবং মান সহ ক্লোন করা উচিত এবং এর মান মিথ্যা সেট করে আমরা নির্দিষ্ট করি যে আমরা শুধুমাত্র প্রদত্ত নোড এবং এর বৈশিষ্ট্য এবং মানগুলি অনুলিপি করতে চাই এবং এর চাইল্ড নোডগুলি নয় .

উদাহরণ

আসুন 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>

আউটপুট

এটি নিম্নলিখিত আউটপুট −

তৈরি করবে

HTML DOM cloneNode() পদ্ধতি

ক্লোন বোতামে ক্লিক করলে -

HTML DOM cloneNode() পদ্ধতি

উপরের উদাহরণে -

আমরা একটি div তৈরি করেছি এবং এর ভিতরে

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 এ বরাদ্দ করবে। তারপরে আমরা

-এ cloneNode(ture) পদ্ধতিটি ব্যবহার করি এবং এটির শিশু উপাদানগুলিকে ক্লোন করতে এবং পরিবর্তনশীল ক্লোনের জন্য বরাদ্দ করতে পরামিতি true সহ। ক্লোন ভেরিয়েবলটি তারপর appendChild() পদ্ধতি ব্যবহার করে ডকুমেন্ট বডিতে যুক্ত করা হয় −

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