append পদ্ধতি

append পদ্ধতি একটি উপাদানের শেষে অন্য একটি উপাদান সন্নিবেশ করতে দেয়। প্যারামিটার হিসেবে পদ্ধতিটি একটি উপাদান গ্রহণ করে, যা সাধারণত createElement এর মাধ্যমে তৈরি, অথবা একটি স্ট্রিং। একসাথে বেশ কয়েকটি উপাদান বা স্ট্রিং যোগ করা সম্ভব, কমা দ্বারা সেগুলো আলাদা করে।

সিনট্যাক্স

parent.append(element or string);

উদাহরণ

আসুন একটি প্যারাগ্রাফ তৈরি করি, এটিতে টেক্সট সেট করি এবং পৃষ্ঠায় #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.append(p);

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

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

উদাহরণ

আসুন একসাথে বেশ কয়েকটি প্যারাগ্রাফ #parent ব্লকের শেষে রাখি:

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

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

let p1 = document.createElement('p');
p1.textContent = 'a';

let p2 = document.createElement('p');
p2.textContent = 'b';

parent.append(p1, p2);

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

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

উদাহরণ

আসুন পদ্ধতির প্যারামিটার হিসেবে একটি স্ট্রিং ব্যবহার করি:

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

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

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

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</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.append(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.append(td); // তৈরি করা td টি tr এর শেষে যোগ করি
	}
	
	table.append(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>

আরও দেখুন

prepend পদ্ধতি,
যা উপাদানগুলো শুরুতে সন্নিবেশ করে
appendChild পদ্ধতি,
যা উপাদানগুলো শেষে সন্নিবেশ করে
insertBefore পদ্ধতি,
যা একটি উপাদানের আগে অন্য উপাদান সন্নিবেশ করে
insertAdjacentElement পদ্ধতি,
যা একটি নির্দিষ্ট স্থানে উপাদান সন্নিবেশ করে
insertAdjacentHTML পদ্ধতি,
যা একটি নির্দিষ্ট স্থানে HTML ট্যাগ সন্নিবেশ করে