JavaScript appendChild() মেথড একটি আইটেম যোগ করে একটি নোডের শেষে। appendChild() প্রায়শই <li> আইটেম একটি লিস্টে যোগ করতে ব্যবহার হয়। আপনাকে একাধিক appendChild() স্টেটমেন্ট ব্যবহার করতে হবে যদি আপনি একাধিক আইটেম একটি নোডে যোগ করতে চান।
JavaScript appendChild কীভাবে ব্যবহার করবেন
কিছু লিস্টে টেক্সট থাকে; অন্যান্য লিস্টে ইমেজ থাকে; অন্যান্য লিস্টে কাস্টম ওয়েব এলিমেন্ট থাকে। যাই হোক লিস্টে কী আছে, একটা বিষয় নিশ্চিত: ওয়েব পেজগুলো লিস্টে ভরা পড়েছে।
যখন আপনি একটি লিস্ট তৈরি করছেন, আপনি সাধারণত এর ভ্যালুগুলো HTML দিয়ে হার্ডকোড করেন। এই প্রসেসটি স্পিড আপ করা যায় JavaScript appendChild নামে একটি মেথড ব্যবহার করে। এই মেথড আপনাকে একটি আইটেম যোগ করতে দেয় একটি লিস্টের শেষে বা অন্য ওয়েব এলিমেন্টে, যেমন একটি ব্লককোট।
এই গাইডে, আমরা কথা বলব appendChild() JavaScript-এ কী এবং কীভাবে এটি কাজ করে। আমরা একটি উদাহরণ দিয়ে ওয়াক থ্রু করব আপনাকে শুরু করতে সাহায্য করতে। চলুন শুরু করি!
JavaScript appendChild কী?
appendChild() একটি নোড যোগ করে একটি পেরেন্ট নোডের শেষে। appendChild() কমনলি ব্যবহার হয় HTML লিস্টে আইটেম যোগ করতে। একটি নোড রেফার করে HTML ডকুমেন্ট অবজেক্ট মডেল (DOM)-এ যেকোনো আইটেম।
appendChild()-এর সিনট্যাক্স এইরকম:
parent.appendChild(child);
"parent" রেফার করে उस এলিমেন্টকে যেটিতে আপনি একটি চাইল্ড যোগ করতে চান। "child" হলো সেই এলিমেন্ট যেটি আপনি পেরেন্টের বটমে অ্যাপেন্ড করতে চান।
আপনাকে JavaScript getElementById() বা অন্য কোনো "getter" ব্যবহার করতে হবে একটি এলিমেন্ট রিট্রিভ করতে। অথবা, আপনি JavaScript-এ একটি HTML এলিমেন্ট তৈরি করতে পারেন এবং তারপর সেই এলিমেন্টকে "parent" অবজেক্ট হিসেবে appendChild()-এর সাথে ব্যবহার করতে পারেন।
উদাহরণস্বরূপ, সকোন রেসিপির একটি লিস্টে নোডগুলোর একটি লিস্ট থাকবে। এই নোডগুলো সম্ভবত <li> ট্যাগ হবে কারণ আমরা একটি লিস্ট তৈরি করব।
একটি পেরেন্ট <div> যেটি <img> ট্যাগ ধারণ করে চাইল্ড <img> নোড ধারণ করবে। appendChild()-এর একটি কমন ইউজ হলো <li> ট্যাগ যোগ করা একটি লিস্টে যেমন <ul> বা <ol>।
appendChild() JavaScript: উদাহরণ
চলুন একটি অ্যাপ্লিকেশন তৈরি করি যা appendChild ব্যবহার করে। আমরা একটি সাইট তৈরি করব যা একটি টেন্থ গ্রেড ক্লাসের স্টুডেন্টদের নামের লিস্ট লোড করে। আমরা এটিকে তিনটি ধাপে ব্রেক ডাউন করব:
- একটি ফ্রন্ট এন্ড সেট আপ করা
- এলিমেন্ট সিলেক্ট এবং তৈরি করা
- appendChild ব্যবহার করা
একটি ফ্রন্ট এন্ড সেট আপ করা
প্রথমে, আমরা একটি বেসিক ফ্রন্ট এন্ড সেট আপ করব যা আমাদের স্টুডেন্ট নামের লিস্ট দেখাবে। index.html নামে একটি ফাইল খুলুন এবং এই কোড পেস্ট করুন:
<!DOCTYPE html> <html> <head> <title>Tenth Grade Class Roster</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Tenth Grade Class Roster</h1> <ul> </ul> </body> <script src="scripts.js"></script> </html>
আমরা একটি বেসিক HTML ডকুমেন্ট তৈরি করেছি। এই ডকুমেন্টে একটি টাইটেল এবং একটি লিস্ট আছে যাতে কোনো চাইল্ড আইটেম নেই। লिस्टটি <ul> ট্যাগ দিয়ে রিপ্রেজেন্ট করা হয়েছে।
এরপর, চলুন আমাদের পেজে কিছু স্টাইল অ্যাড করি styles.css নামে একটি ফাইলে আমাদের ওয়েব পেজের aesthetics উন্নত করার জন্য:
body { background-color: #f7f7f7; margin: auto; width: 50%; }
এই CSS রুল আমাদের পেজের জন্য একটি হালকা গ্রে ব্যাকগ্রাউন্ড কালার সেট করবে। আমরা CSS background-color প্রপার্টি ব্যবহার করে এটি করছি। এটি <body> ট্যাগের কন্টেন্টকে পেজের সেন্টারে সরিয়ে দেবে। কীভাবে আমরা লেআউট স্ট্রাকচার করেছি তা জানতে, আমাদের CSS বক্স মডেল গাইড চেক আউট করুন।
আমাদের পেজ এখনো ফাংশনাল নয়। আমরা কোনো লিস্ট এলিমেন্ট যোগ করিনি। আপনি ব্রাউজারে এটি খোললে আমাদের পেজ কী দেখাবে:
স্পষ্টতই এখনো কাজ বাকি। চলুন আমাদের ওয়েব পেজে JavaScript যোগ করি।
এলিমেন্ট সিলেক্ট এবং তৈরি করা
আমরা আমাদের লিস্টে আইটেম যোগ করা শুরু করার আগে, আমাদের أولئك এলিমেন্টগুলো সিলেক্ট করতে হবে যেগুলোর সাথে আমরা কাজ করব। scripts.js নামে একটি ফাইল খুলুন এবং এই কোড অ্যাড করুন:
const students = document.querySelector("ul");
এই লাইন কোড আমাদের পেজে <ul> ট্যাগে আইটেমটি সিলেক্ট করবে। এটি আমাদের লিস্টকে রিপ্রেজেন্ট করে। এরপর, আমরা একটি এলিমেন্ট তৈরি করব আমাদের লিস্টে যোগ করার জন্য:
let li = document.createElement("li"); li.textContent = "Steven";
এই কোড একটি টেক্সট নোড তৈরি করে <li> ট্যাগসহ যেটি "Steven" শব্দটি ধারণ করে। এখন বাকি থাকলো আমাদের নতুন তৈরি করা এলিমেন্টটি আমাদের লিস্টে যোগ করা।
JavaScript appendChild() মেথড ব্যবহার করা
appendChild() আমাদের একটি নোডে এলিমেন্ট যোগ করতে দেয়। নিচের কোড আপনার scripts.js ফাইলের বটমে অ্যাড করুন:
students.appendChild(li);
এটি আমাদের আগে তৈরি করা লিস্ট আইটেম আমাদের লিস্টে যোগ করবে। চলুন আমাদের ওয়েব পেজ খুলি এবং ফলাফল দেখি:
আমাদের লিস্টে এখন এক আইটেম আছে। আমরা আমাদের কোড আরও ইফিশিয়েন্ট করতে পারি একটি ফাংশন তৈরি করে যা আইটেম যোগ করে আমাদের লিস্টে। এটি আমাদের একাধিক আইটেম যোগ করতে দেবে আমাদের আগের createElement কোড রিপিট না করেই।
createElement এবং textContent লাইনগুলোকে এভাবে পরিবর্তন করুন:
function createStudent(name) { let li = document.createElement("li"); li.textContent = name; return li; }
এই ফাংশনটি كلما কল করা হবে একটি নতুন <li> এলিমেন্ট তৈরি করবে। তারপর, appendChild() স্টেটমেন্টকে এই ফাংশন ব্যবহার করে পরিবর্তন করুন:
students.appendChild(createStudent("Mark")); students.appendChild(createStudent("Chloe")); students.appendChild(createStudent("Louise"));
এটি তিনজন স্টুডেন্ট তৈরি করবে: Mark, Chloe, এবং Louise। চলুন আবার আমাদের index.html ফাইল খুলি এবং দেখি আমাদের পরিবর্তনগুলো হয়েছে কিনা:
আমাদের ক্লাস রোস্টার এখন তিন নাম আছে।
আইটেম একটি ভিন্ন লিস্টে সরানো
আপনি appendChild() মেথড ব্যবহার করে আইটেম একটি ভিন্ন লিস্টে সরাতে পারেন। আসুন এটি শো অফ করি উপরের উদাহরণ অमेंড করে। প্রথম, চলুন আমাদের HTML পেজ পরিবর্তন করি যাতে আমাদের দুটি লিস্ট থাকে:
... <body> <h1>Tenth Grade Class Roster</h1> <h3>Sat Test</h3> <ul id="sat_test"> </ul> <h3>Has Not Sat Test</h3> <ul id="has_not_sat_test"> </ul> </body> ...
আমরা দুটি লিস্ট তৈরি করেছি: sat test এবং has not sat test। এখন, চলুন আমাদের JavaScript ফাইল আপডেট করি আমাদের দুটি লিস্ট সিলেক্ট করতে এবং তিনজন স্টুডেন্ট তৈরি করতে:
const sat_test = document.getElementById("sat_test"); const has_not_sat_test = document.getElementById("has_not_sat_test"); function createStudent(name) { let li = document.createElement("li"); li.textContent = name; return li; } has_not_sat_test.appendChild(createStudent("Mark")); has_not_sat_test.appendChild(createStudent("Chloe")); has_not_sat_test.appendChild(createStudent("Louise"));
আমরা getElementById মেথড ব্যবহার করছি আমাদের দুটি লিস্ট সিলেক্ট করার জন্য।
এই কোড Mark, Chloe, এবং Lucy কে "has not sat test" লিস্টে যোগ করে। Louise টেস্ট দিয়েছে, তাই সে অন্য লিস্টে যেতে পারে। আমরা তার নাম appendChild() মেথড এবং lastChild নামে আরেকটি মেথড ব্যবহার করে সরাতে পারি:
var louise = has_not_sat_test.lastChild; sat_test.appendChild(louise);
এই কোড আমাদের "has not sat test" লিস্টের লাস্ট DOM এলিমেন্ট সিলেক্ট করে। এই আইটেমটি lastChild মেথড ব্যবহার করে রিট্রিভ করা হয়। এরপর, আমরা এই আইটেমটি আমাদের "sat test" লিস্টে অ্যাপেন্ড করেছি।
চলুন আমাদের HTML ফাইল খুলি:
আমাদের দুটি লিস্ট আছে: sat test এবং has not sat test। প্রাথমিকভাবে, আমরা সব স্টুডেন্টের নাম "has not sat test" লিস্টে সরিয়েছি। তারপর, আমরা appendChild() ব্যবহার করে Louise-এর নাম "sat test" লিস্টে সরিয়েছি।
উপসংহার
appendChild() মেথড একটি এলিমেন্টের শেষে একটি নোড তৈরি করতে ব্যবহৃত হয়। আপনি appendChild() ব্যবহার করতে পারেন যেকোনো এলিমেন্ট একটি এলিমেন্টের লিস্টে যোগ করতে। উদাহরণস্বরূপ, আপনি একটি <div> এলিমেন্ট যোগ করতে পারেন একটি <section> ট্যাগে।
একটি চ্যালেঞ্জ হিসেবে, চেষ্টা করুন দেখুন আপনি appendChild() JavaScript মেথড ব্যবহার করে একটি ইমেজের গ্রিড তৈরি করতে পারেন কিনা। যখন পেজ লোড হবে, এটি চারটি ইমেজের একটি লিস্ট রেন্ডার করা উচিত appendChild() ব্যবহার করে।
টপ JavaScript অনলাইন কোর্স এবং লার্নিং রিসোর্সের গাইডেন্সের জন্য, আমাদের How to Learn JavaScript গাইড চেক আউট করুন।
