Метод append

append методи бирон элементнинг охирига бошка элементни киритиш имконини беради. Метод параметри сифатида, оддата createElement орқали яратилган элементни ёки сатрни қабул қилади. Бир нечта элементлар ёки сатрларни вергул орқали айриб, дарҳол қўшиш мумкин.

Синтаксис

ота-она.append(элемент ёки сатр);

Мисол

Абзац яратиб, унга матн белгилаб, саҳифада #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 методи,
тегларни белгиланган жойга киритади