append metodi

append metodi biron bir elementning oxiriga boshqa elementni qo'shish imkonini beradi. Usul parametri sifatida odatda createElement orqali yaratilgan elementni yoki satrni qabul qiladi. Bir vaqtning o'zida bir nechta elementlarni yoki satrlarni vergul bilan ajratib qo'shish mumkin.

Sintaksis

ota.append(element yoki satr);

Misol

Keling, abzats yaratamiz, unga matn o'rnatamiz va sahifada #parent blokining oxiriga joylashtiramiz:

<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);

Kodni bajarish natijasi:

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

Misol

Keling, bir vaqtning o'zida bir nechta abzatslarni #parent blokining oxiriga joylashtiramiz:

<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);

Kodni bajarish natijasi:

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

Misol

Keling, usul parametri sifatida satrdan foydalanamiz:

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

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

Kodni bajarish natijasi:

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

Misol

ul berilgan. Keling, uning ichiga 9 ta li teglarini joylashtiramiz, shu bilan birga ularning matniga tartib raqamlarini yozamiz:

<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);
}

Kodni bajarish natijasi:

<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>

Misol

Keling, jadvalni tr va td lar bilan to'ldiramiz:

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

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // tr yaratamiz
	
	// Tr ni td lar bilan to'ldiramiz:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // td yaratamiz
		td.textContent = j; // unga matn yozamiz
		
		tr.append(td); // yaratilgan td ni tr ning oxiriga qo'shamiz
	}
	
	table.append(tr); // yaratilgan tr ni jadvalning oxiriga qo'shamiz
}

Kodni bajarish natijasi:

<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>

Shuningdek qarang

prepend metodi,
elementlarni boshiga qo'shadi
appendChild metodi,
elementlarni oxiriga qo'shadi
insertBefore metodi,
elementni boshqa element oldidan qo'shadi
insertAdjacentElement metodi,
elementni belgilangan joyga qo'shadi
insertAdjacentHTML metodi,
teglarni belgilangan joyga qo'shadi