Метода appendChild

Метода appendChild омогућава уметање другог елемента на крај неког елемента. Најчешће се користи након креирања елемента помоћу createElement.

Синтакса

родитељ.appendChild(елемент);

Пример

Хајде да креирамо пасус, поставимо му текст и сместимо на страницу на крај блока #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);

Резултат извршавања кода:

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

Пример

Дат је ul. Хајде да сместимо у њему 9 тагова li, при чему ћемо им текст учинити редним бројевима:

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

Резултат извршавања кода:

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

Пример

Хајде да попунимо табелу tr-овима и td-јевима:

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

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // креирамо tr
	
	// Попуњавамо tr td-јевима:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // креирамо td
		td.textContent = j; // уписујемо у њега текст
		
		tr.appendChild(td); // додајемо креирани td на крај tr-а
	}
	
	table.appendChild(tr); // додајемо креирани tr на крај табеле
}

Резултат извршавања кода:

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

Погледајте такође

метода append,
која умета елементе на крај
метода insertBefore,
која умета елемент пре неког елемента
метода insertAdjacentElement,
која умета елемент на задато место
метода insertAdjacentHTML,
која умета тагове на задато место