Метод append

Метод append омогућава уметање другог елемента на крај неког елемента. Параметром метод прихвата елемент, обично креиран преко createElement, или стринг. Могуће је додати одмах неколико елемената или стрингова, набрајањем их преко зареза.

Синтакса

родитељ.append(елемент или стринг);

Пример

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

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

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

Пример

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

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

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

Пример

Хајде као параметар метода да искористимо стринг:

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

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

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

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</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.append(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 table = document.querySelector('#table');

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.append(td); // додајемо креирану td-шку на крај tr-ке
	}
	
	table.append(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>

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

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