appendChild Metodu

appendChild metodu, bir öğenin sonuna başka bir öğe eklemeye izin verir. En çok createElement ile bir öğe oluşturulduktan sonra kullanılır.

Sözdizimi

ebeveyn.appendChild(öğe);

Örnek

Bir paragraf oluşturalım, ona bir metin belirleyelim ve sayfada #parent bloğunun sonuna yerleştirelim:

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

Kodun çalıştırılmasının sonucu:

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

Örnek

Bir ul verildi. İçine 9 tane li etiketi yerleştirelim, ve metinlerini sıra numaraları yapalım:

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

Kodun çalıştırılmasının sonucu:

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

Örnek

Tabloyu tr'ler ve td'ler ile dolduralım:

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

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // tr oluşturuyoruz
	
	// Tr'yi td'ler ile dolduruyoruz:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // td oluşturuyoruz
		td.textContent = j; // içine metin yazıyoruz
		
		tr.appendChild(td); // oluşturulan td'yi tr'nin sonuna ekliyoruz
	}
	
	table.appendChild(tr); // oluşturulan tr'yi tablonun sonuna ekliyoruz
}

Kodun çalıştırılmasının sonucu:

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

Ayrıca Bakınız

öğeleri sona ekleyen append metodu,
öğeyi başka bir öğeden önce ekleyen insertBefore metodu,
öğeyi belirtilen yere ekleyen insertAdjacentElement metodu,
etiketleri belirtilen yere ekleyen insertAdjacentHTML metodu,