HTML DOM appendChild() পদ্ধতিটি চাইল্ড নোডের তালিকার শেষে একটি টেক্সট নোড তৈরি এবং যোগ করতে ব্যবহৃত হয়। appendChild() পদ্ধতিটি একটি উপাদানকে বর্তমান অবস্থান থেকে একটি নতুন অবস্থানে নিয়ে যাওয়ার জন্যও ব্যবহার করা যেতে পারে। appendChild() ব্যবহার করে আপনি একটি তালিকায় নতুন মান যোগ করতে পারেন এবং এমনকি অন্য অনুচ্ছেদের অধীনে একটি নতুন অনুচ্ছেদ যোগ করতে পারেন।
সিনট্যাক্স
নিচে appendChild() মেথড -
-এর সিনট্যাক্স দেওয়া হলnode.appendChild( node )
এখানে, প্যারামিটার নোড হল সেই বস্তু যা আপনি যুক্ত করতে চান। এটি একটি বাধ্যতামূলক প্যারামিটার মান৷
৷উদাহরণ
আসুন আমরা appendChild() Method-
এর একটি উদাহরণ দেখি<!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> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
3 বার যুক্ত ক্লিক করার পর:−
উপরের উদাহরণে -
আমরা "SampleDIV" আইডি দিয়ে একটি ডিভি তৈরি করেছি। সংযোজিত নোড এই ডিভের চাইল্ড হিসাবে কাজ করবে।
<div id="SampleDIV"> A DIV element </div>
তারপরে আমাদের কাছে "অ্যাপেন্ড" নামে একটি বোতাম রয়েছে যা AppendP()
ফাংশনটি কার্যকর করবে<button onclick="AppendP()">Append</button>
AppendP() ফাংশন প্রথমে একটি অনুচ্ছেদ (p) উপাদান তৈরি করে এবং এটি পরিবর্তনশীল অনুচ্ছেদে বরাদ্দ করে। তারপর innerHTML ব্যবহার করে অনুচ্ছেদে কিছু টেক্সট যোগ করা হয় এবং একটি ভেরিয়েবল x টেক্সটে যুক্ত করা হয়। এই ভেরিয়েবলটি যতবার আমরা "অ্যাপেন্ড" বোতামে ক্লিক করি ততবার বৃদ্ধি পায়। অবশেষে আমরা div এলিমেন্টের চাইল্ড নোড −
হিসেবে সদ্য তৈরি অনুচ্ছেদ যুক্ত করিvar x=1;
function AppendP() {
var paragraph = document.createElement("P");
paragraph.innerHTML = "This is paragraph "+x;
document.getElementById("SampleDIV").appendChild(paragraph);
x++;
} 