HTML DOM appendChild() মেথড

HTML DOM appendChild() মেথড চাইল্ড নোডের তালিকার শেষে একটি টেক্সট নোড তৈরি এবং যোগ করতে ব্যবহৃত হয়। appendChild() মেথড একটি এলিমেন্টকে বর্তমান অবস্থান থেকে নতুন অবস্থানে সরানোর জন্যও ব্যবহার করা যেতে পারে। appendChild() ব্যবহার করে আপনি একটি লিস্টে নতুন মান যোগ করতে পারেন এবং একটি প্যারাগ্রাফের নিচে অন্য একটি প্যারাগ্রাফও যোগ করতে পারেন।

সিনট্যাক্স

appendChild() মেথডের সিনট্যাক্স নিচে দেওয়া হলো:

node.appendChild( node )

এখানে, প্যারামিটার node হলো আপনি যে অবজেক্টটি অ্যাপেন্ড করতে চান। এটি একটি বাধ্যতামূলক প্যারামিটার মান।

উদাহরণ

appendChild() মেথডের একটি উদাহরণ দেখি:

<!DOCTYPE html> <html> <body> <p>Click the button to create a paragraph and append it to the div</p> <div id="SampleDIV"> A DIV element </div> <button onclick="AppendP()">Append</button> <script>    var x=1;    function AppendP() {       var paragraph = document.createElement("P");       paragraph.innerHTML = "This is paragraph "+x;       document.getElementById("SampleDIV").appendChild(paragraph);       x++;    } </script> </body> </html>

আউটপুট

এটি নিচের আউটপুট দেবে:

HTML DOM appendChild() মেথড

Append 3 বার ক্লিক করার পর:

HTML DOM appendChild() মেথড

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

আমরা id "SampleDIV" সহ একটি div তৈরি করেছি। অ্যাপেন্ড করা নোড এই div-এর চাইল্ড হিসেবে কাজ করবে।

<div id="SampleDIV"> A DIV element </div>

আমরা তারপর "Append" নামে একটি বাটন তৈরি করেছি যা AppendP() ফাংশন এক্সিকিউট করবে।

<button onclick="AppendP()">Append</button>

AppendP() ফাংশন প্রথমে একটি প্যারাগ্রাফ (p) এলিমেন্ট তৈরি করে এবং এটিকে paragraph ভেরিয়েবলে অ্যাসাইন করে। তারপর innerHTML ব্যবহার করে প্যারাগ্রাফে কিছু টেক্সট যোগ করা হয় এবং একটি ভেরিয়েবল x টেক্সটের সাথে অ্যাপেন্ড করা হয়। এই ভেরিয়েবলটি প্রতিবার "Append" বাটনে ক্লিক করার সময় ইনক্রিমেন্ট হয়। শেষে নতুন তৈরি করা প্যারাগ্রাফটি div এলিমেন্টের চাইল্ড নোড হিসেবে অ্যাপেন্ড করা হয়:

var x=1; function AppendP() {    var paragraph = document.createElement("P");    paragraph.innerHTML = "This is paragraph "+x;    document.getElementById("SampleDIV").appendChild(paragraph);    x++; }