Metode append

Metode append ļauj ievietot kāda elementa beigās citu elementu. Kā parametru metode pieņem elementu, parasti izveidotu ar createElement, vai virkni. Varat pievienot uzreiz vairākus elementus vai virknes, uzskaitot tos atdalītus ar komatu.

Sintakse

vecāks.append(elements vai virkne);

Piemērs

Izveidosim rindkopu, iestatīsim tai tekstu un ievietosim lapā bloka #parent beigās:

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

Koda izpildes rezultāts:

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

Piemērs

Ievietosim uzreiz vairākas rindkopas bloka #parent beigās:

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

Koda izpildes rezultāts:

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

Piemērs

Izmantosim kā metodes parametru virkni:

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

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

Koda izpildes rezultāts:

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

Piemērs

Dots ul. Izvietosim tajā 9 li tagus, bet to tekstu padarīsim par kārtas numuriem:

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

Koda izpildes rezultāts:

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

Piemērs

Aizpildīsim tabulu ar tr un td elementiem:

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

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // izveidojam tr
	
	// Aizpildām tr ar td elementiem:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // izveidojam td
		td.textContent = j; // ierakstām tajā tekstu
		
		tr.append(td); // pievienojam izveidoto td tr beigās
	}
	
	table.append(tr); // pievienojam izveidoto tr tabulas beigās
}

Koda izpildes rezultāts:

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

Skatiet arī

metode prepend,
kas ievieto elementus sākumā
metode appendChild,
kas ievieto elementus beigās
metode insertBefore,
kas ievieto elementu pirms elementa
metode insertAdjacentElement,
kas ievieto elementu norādītajā vietā
metode insertAdjacentHTML,
kas ievieto tagus norādītajā vietā