জাভাস্ক্রিপ্টে এলিমেন্ট তৈরি এবং সন্নিবেশ করানো

এখন আমরা শিখব কিভাবে জাভাস্ক্রিপ্টের মাধ্যমে নতুন DOM এলিমেন্ট তৈরি করা যায়, এবং তারপর সেগুলো পৃষ্ঠায় যুক্ত করা যায়। এর জন্য createElement মেথডটি ব্যবহার করা হয়। এই মেথডের প্যারামিটার হিসেবে যে ট্যাগ তৈরি করতে চান তার নাম পাঠাতে হবে।

যদি createElement এর কাজের ফলাফল একটি ভেরিয়েবলে রাখা হয়, তবে সেই ভেরিয়েবলে এমন একটি এলিমেন্ট থাকবে, যেন আমরা এটা querySelector এর মাধ্যমে পেয়েছি।

একমাত্র পার্থক্য - আমাদের এলিমেন্টটি পৃষ্ঠায় স্থাপন করা থাকবে না। তবে আমরা এর টেক্সট পরিবর্তন করতে পারব, অ্যাট্রিবিউট দিতে পারব, ইভেন্ট হ্যান্ডলার যুক্ত করতে পারব এবং শেষ পর্যন্ত এটিকে পৃষ্ঠায় স্থাপন করতে পারব।

পৃষ্ঠায় নতুন এলিমেন্ট স্থাপন করার জন্য appendChild মেথডটি প্রয়োগ করা হয়। এই মেথডটি সেই এলিমেন্টের উপর প্রয়োগ করা উচিত, যার ভিতরে আমরা আমাদের এলিমেন্টটি রাখতে চাই। এবং মেথডের প্যারামিটার হিসাবে আমাদের নতুন এলিমেন্টটি পাঠাতে হবে, যা আগে createElement এর মাধ্যমে তৈরি করা হয়েছিল।

একটি ব্যবহারিক উদাহরণ দেখা যাক। ধরুন আমাদের একটি div আছে, এবং তার ভিতরে - কয়েকটি প্যারাগ্রাফ:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

চলুন একটি প্যারাগ্রাফ তৈরি করি, এটির টেক্সট সেট করি এবং পৃষ্ঠায় #parent ব্লকের শেষে স্থাপন করি:

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.appendChild(p);

কোড 실행ের ফলাফল:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>!</p>
</div>

একটি ol দেওয়া আছে:

<ol id="elem"></ol>

এর শেষে li সন্নিবেশ করান যার টেক্সট 'item'।

একটি ol এবং একটি বাটন দেওয়া আছে:

<ol id="elem"></ol>
<button id="button">click me</button>

এমন করুন যাতে বাটনে ক্লিক করলে লিস্টের শেষে একটি li যোগ হয় যার টেক্সট 'item'।