Metoda appendChild

Metoda appendChild omogoča vstavljanje drugega elementa na konec katerega koli elementa. Najpogosteje se uporablja po ustvarjanju elementa z createElement.

Sintaksa

starš.appendChild(element);

Primer

Ustvarimo odstavek, nastavimo mu besedilo in ga postavimo na stran na konec 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 izvajanja kode:

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

Primer

Podan je ul. Postavimo vanj 9 oznak li, pri čemer naj bodo njihova besedila zaporedne številke:

<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 izvajanja kode:

<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

Izpolnimo tabelo z tr in td elementi:

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

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // ustvarimo vrstico (tr)
	
	// Izpolnimo vrstico (tr) s celicami (td):
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // ustvarimo celico (td)
		td.textContent = j; // vanjo vpišemo besedilo
		
		tr.appendChild(td); // dodamo ustvarjeno celico (td) na konec vrstice (tr)
	}
	
	table.appendChild(tr); // dodamo ustvarjeno vrstico (tr) na konec tabele
}

Rezultat izvajanja kode:

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

Glejte tudi

metoda append,
ki vstavi elemente na konec
metoda insertBefore,
ki vstavi element pred element
metoda insertAdjacentElement,
ki vstavi element na določeno mesto
metoda insertAdjacentHTML,
ki vstavi oznake na določeno mesto