Methode append

Die Methode append ermöglicht das Einfügen eines anderen Elements am Ende eines beliebigen Elements. Als Parameter akzeptiert die Methode ein Element, in der Regel erstellt über createElement, oder einen String. Es können mehrere Elemente oder Strings gleichzeitig hinzugefügt werden, indem sie durch Kommas getrennt aufgelistet werden.

Syntax

Eltern.append(Element oder String);

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.append(p);

Ergebnis der Codeausführung:

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

Beispiel

Lassen Sie uns mehrere Absätze gleichzeitig am Ende des Blocks #parent platzieren:

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

Ergebnis der Codeausführung:

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

Beispiel

Lassen Sie uns einen String als Parameter der Methode verwenden:

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

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

Ergebnis der Codeausführung:

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

Beispiel

Gegeben ist ein ul. Lassen Sie uns 9 li-Tags darin platzieren, wobei ihr 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.append(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 eine Tabelle mit tr-Elementen und td-Elementen füllen:

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

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // tr erstellen
	
	// tr mit td-Elementen füllen:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // td erstellen
		td.textContent = j; // Text hineinschreiben
		
		tr.append(td); // erstelltes td am Ende der tr hinzufügen
	}
	
	table.append(tr); // erstellte tr am Ende der Tabelle hinzufügen
}

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 prepend,
die Elemente am Anfang einfügt
die Methode appendChild,
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 Stelle einfügt
die Methode insertAdjacentHTML,
die HTML-Tags an einer bestimmten Stelle einfügt