Методот 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,
кој вметнува тагови на зададено место