Metoda appendChild

Metoda appendChild omogućava ubacivanje drugog elementa na kraj nekog elementa. Najčešće se koristi nakon kreiranja elementa pomoću createElement.

Sintaksa

roditelj.appendChild(element);

Primer

Hajde da kreiramo paragraf, postavimo mu tekst i postavimo ga na stranicu na kraju 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.appendChild(p);

Rezultat izvršavanja koda:

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

Primer

Dat je ul. Hajde da u njemu postavimo 9 tagova li, pri čemu ćemo njihov tekst napraviti 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.appendChild(li);
}

Rezultat izvršavanja 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-kama i td-kama:

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

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // kreiramo tr-ku
	
	// Popunjavamo tr-ku td-kama:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // kreiramo td-ku
		td.textContent = j; // pišemo u nju tekst
		
		tr.appendChild(td); // dodajemo kreiranu td-ku na kraj tr-ke
	}
	
	table.appendChild(tr); // dodajemo kreiranu tr-ku na kraj tabele
}

Rezultat izvršavanja 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

metoda append,
koja ubacuje elemente na kraj
metoda insertBefore,
koja ubacuje element ispred elementa
metoda insertAdjacentElement,
koja ubacuje element na zadato mesto
metoda insertAdjacentHTML,
koja ubacuje tagove na zadato mesto