Methode appendChild

Die Methode appendChild ermöglicht es, ein anderes Element am Ende eines Elements einzufügen. Am häufigsten wird sie nach dem Erstellen eines Elements mit createElement verwendet.

Syntax

elternelement.appendChild(element);

Beispiel

Lassen Sie uns einen Absatz erstellen, ihm Text setzen und ihn am Ende des Blocks #parent auf der Seite platzieren:

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

Ergebnis der Codeausführung:

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

Beispiel

Gegeben sei ein ul. Lassen Sie uns darin 9 li-Tags platzieren, wobei deren Text die Ordnungszahlen sein sollen:

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

Ergebnis der Codeausführung:

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

Beispiel

Lassen Sie uns die Tabelle mit tr-Elementen und td-Elementen füllen:

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

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // tr-Element erstellen
	
	// Tr-Element mit td-Elementen füllen:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // td-Element erstellen
		td.textContent = j; // Text hineinschreiben
		
		tr.appendChild(td); // erstelltes td-Element am Ende der tr anhängen
	}
	
	table.appendChild(tr); // erstelltes tr-Element am Ende der Tabelle anhängen
}

Ergebnis der Codeausführung:

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

Siehe auch

die Methode append,
die Elemente am Ende einfügt
die Methode insertBefore,
die ein Element vor einem anderen Element einfügt
die Methode insertAdjacentElement,
die ein Element an einer bestimmten Position einfügt
die Methode insertAdjacentHTML,
die HTML-Code an einer bestimmten Position einfügt