Metod append

Metod append omogućava umetanje drugog elementa na kraj nekog elementa. Kao parametar metod prima element, obično kreiran preko createElement, ili string. Može se dodati odjednom više elemenata ili stringova, navodeći ih zarezom.

Sintaksa

roditelj.append(element ili string);

Primer

Hajde da kreiramo paragraf, postavimo mu tekst i smestimo na stranicu na kraj bloka #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);

Rezultat izvršenja koda:

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

Primer

Hajde da smestimo odjednom više paragrafa na kraj bloka #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);

Rezultat izvršenja koda:

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

Primer

Hajde da kao parametar metoda iskoristimo string:

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

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

Rezultat izvršenja koda:

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

Primer

Dat je ul. Hajde da u njemu smestimo 9 tagova li, pri čemu njihov tekst učinimo rednim brojevima:

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

Rezultat izvršenja koda:

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

Primer

Hajde da popunimo tabelu tr-ovima i td-ovima:

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

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // kreiramo tr
	
	// Popunjavamo tr td-ovima:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // kreiramo td
		td.textContent = j; // upisujemo u nju tekst
		
		tr.append(td); // dodajemo kreirani td na kraj tr
	}
	
	table.append(tr); // dodajemo kreirani tr na kraj tabele
}

Rezultat izvršenja koda:

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

Pogledajte takođe

metod prepend,
koji umeće elemente na početak
metod appendChild,
koji umeće elemente na kraj
metod insertBefore,
koji umeće element ispred elementa
metod insertAdjacentElement,
koji umeće element na zadato mesto
metod insertAdjacentHTML,
koji umeće tagove na zadato mesto