✨ JavaScript DOM Create / Append / Remove Nodes – বাংলা টিউটোরিয়াল
DOM এ নতুন এলিমেন্ট তৈরি, যোগ করা এবং মুছে ফেলা হলো ওয়েব পেজে ডায়নামিক পরিবর্তনের জন্য সবচেয়ে গুরুত্বপূর্ণ কৌশল। JavaScript দিয়ে আপনি নতুন HTML এলিমেন্ট তৈরি করতে পারেন, তারপর সেগুলো DOM এ যুক্ত করতে পারেন অথবা দরকারে কোনো এলিমেন্ট সরিয়ে ফেলতেও পারবেন।
1️⃣ নতুন DOM এলিমেন্ট তৈরি করা (Create Element)
নিচের উদাহরণে আমরা <div> এর মধ্যে একটি নতুন <p> এলিমেন্ট তৈরি করে সেটির টেক্সট সেট করব:
<div id="content"></div>
// নতুন প্যারাগ্রাফ তৈরি করা
let newPara = document.createElement(“p”);
// প্যারাগ্রাফে লেখা যোগ করা
newPara.textContent = “আমি নতুন তৈরি করা প্যারাগ্রাফ!”;
</script>
ব্যাখ্যা: এখানে document.createElement("p") দিয়ে একটি নতুন <p> তৈরি করা হয়েছে, কিন্তু এটি এখনও DOM এ যুক্ত হয়নি। তার মধ্যে textContent দিয়ে লেখা দেওয়া হয়েছে।
2️⃣ নতুন এলিমেন্ট DOM এ যোগ করা (Append Child)
এখন আগের তৈরি newPara প্যারাগ্রাফটিকে আমরা content ডিভের মধ্যে যোগ করব:
<div id="content"></div>
let newPara = document.createElement(“p”);
newPara.textContent = “আমি নতুন তৈরি করা প্যারাগ্রাফ!”;
// নতুন প্যারাগ্রাফকে content ডিভে যুক্ত করা
document.getElementById(“content”).appendChild(newPara);
</script>
ব্যাখ্যা: appendChild() মেথড দিয়ে আমরা নতুন এলিমেন্টটিকে মূল DOM এ যুক্ত করেছি। ফলে পেজে নতুন প্যারাগ্রাফটি দৃশ্যমান হবে।
3️⃣ বিদ্যমান এলিমেন্ট মুছে ফেলা (Remove Child)
DOM থেকে কোনো এলিমেন্ট সরিয়ে ফেলতে হলে প্যারেন্ট এলিমেন্ট থেকে সেটিকে removeChild() মেথড দিয়ে রিমুভ করতে হবে:
<div id="container">
<p id="para1">এই প্যারাগ্রাফটি মুছে যাবে।</p>
</div>
let container = document.getElementById(“container”);
let para = document.getElementById(“para1”);
// container থেকে para কে সরিয়ে দেওয়া হচ্ছে
container.removeChild(para);
</script>
ব্যাখ্যা: এখানে প্রথমে প্যারেন্ট এলিমেন্ট container এবং মুছে ফেলতে হবে এমন প্যারাগ্রাফ para নির্বাচন করা হয়েছে। তারপর removeChild() মেথড দিয়ে প্যারাগ্রাফটিকে DOM থেকে সরিয়ে ফেলা হয়েছে।
4️⃣ নতুন এলিমেন্টের মধ্যে Attribute যোগ করা (setAttribute)
নতুন তৈরি এলিমেন্টে অ্যাট্রিবিউট যোগ করতে setAttribute() মেথড ব্যবহার করা হয়। যেমন, একটি লিংক তৈরি করে সেটার href সেট করা:
<div id="links"></div>
let aTag = document.createElement(“a”);
aTag.textContent = “Google এ যান”;
aTag.setAttribute(“href”, “https://www.google.com”);
aTag.setAttribute(“target”, “_blank”);
document.getElementById(“links”).appendChild(aTag);
</script>
ব্যাখ্যা: এখানে আমরা একটি <a> ট্যাগ তৈরি করেছি, তার টেক্সট সেট করেছি, এবং লিংক ও টার্গেট অ্যাট্রিবিউট যোগ করেছি। তারপর সেটি DOM-এ যুক্ত করা হয়েছে।
সারমর্ম
JavaScript দিয়ে DOM এ নতুন এলিমেন্ট তৈরি করা, যোগ করা এবং মুছে ফেলা আমাদের ওয়েবসাইটকে ইন্টার্যাকটিভ এবং ডায়নামিক করে তোলে। createElement(), appendChild(), removeChild(), এবং setAttribute() মেথডগুলো এই কাজের মূল হাতিয়ার। আপনারা এগুলো ভালোভাবে আয়ত্ত করলে ওয়েব ডেভেলপমেন্টে অনেক সুবিধা পাবেন।
প্র্যাকটিস করুন, নতুন এলিমেন্ট তৈরি করুন, পরিবর্তন আনুন, এবং নিজের হাত দিয়ে ওয়েব পেজ ম্যানিপুলেট করুন। এতে আপনার JavaScript দক্ষতা অনেক বাড়বে।