appendChild পদ্ধতি

appendChild পদ্ধতি একটি এলিমেন্টের শেষে অন্য একটি এলিমেন্ট ঢোকানোর সুযোগ দেয়। প্রায়শই createElement এর সাহায্যে এলিমেন্ট তৈরি করার পরে এটি ব্যবহৃত হয়।

সিনট্যাক্স

parent.appendChild(element);

উদাহরণ

আসুন একটি অনুচ্ছেদ তৈরি করি, এটিতে টেক্সট সেট করি এবং পৃষ্ঠায় #parent ব্লকের শেষে রাখি:

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

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>

উদাহরণ

একটি ul দেওয়া আছে। আসুন এতে 9টি li ট্যাগ রাখি, এবং তাদের টেক্সট করি ক্রমিক নম্বর:

<ul id="parent"></ul>

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

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	parent.appendChild(li);
}

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

<ul id="parent">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>

উদাহরণ

আসুন টেবিলটি tr এবং td দিয়ে পূরণ করি:

<table id="table"></table>

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // tr তৈরি করি
	
	// tr কে td দিয়ে পূরণ করি:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // td তৈরি করি
		td.textContent = j; // এতে টেক্সট লিখি
		
		tr.appendChild(td); // তৈরি করা td টি tr এর শেষে যোগ করি
	}
	
	table.appendChild(tr); // তৈরি করা tr টি টেবিলের শেষে যোগ করি
}

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

<table id="table">
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
</table>

আরও দেখুন

append পদ্ধতি,
যা এলিমেন্ট শেষে ঢোকায়
insertBefore পদ্ধতি,
যা একটি এলিমেন্টের আগে আরেকটি এলিমেন্ট ঢোকায়
insertAdjacentElement পদ্ধতি,
যা এলিমেন্ট নির্দিষ্ট স্থানে ঢোকায়
insertAdjacentHTML পদ্ধতি,
যা ট্যাগগুলো নির্দিষ্ট স্থানে ঢোকায়