append методу

append методу аркылуу бир элементи башка бир элементин аягына кошсо болот. Метод параметри катары адатта createElement аркылуу түзүлгөн элементти, же сапты кабыл алат. Бир нече элементти же сапты үстүртөн кошуп, аларды үтүр менен бөлүп көрсөтсө болот.

Синтаксис

ata-enen.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 методу,
тегдерди белгиленген жерге кошуучу