Metoden append

Metoden append låter dig infoga i slutet av ett element ett annat element. Som parameter tar metoden ett element, vanligtvis skapat via createElement, eller en sträng. Du kan lägga till flera element eller strängar på en gång genom att lista dem med komma emellan.

Syntax

förälder.append(element eller sträng);

Exempel

Låt oss skapa ett stycke, sätta text till det och placera det på sidan i slutet av blocket #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);

Resultat av utförd kod:

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

Exempel

Låt oss placera flera stycken på en gång i slutet av blocket #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);

Resultat av utförd kod:

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

Exempel

Låt oss använda en sträng som parameter för metoden:

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

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

Resultat av utförd kod:

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

Exempel

Given ul. Låt oss placera 9 stycken li-taggar i den, och göra deras text till ordningsnummer:

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

Resultat av utförd kod:

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

Exempel

Låt oss fylla en tabell med tr och td:

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

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // skapar tr
	
	// Fyller tr med td:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // skapar td
		td.textContent = j; // skriver text i den
		
		tr.append(td); // lägger till den skapade tdn i slutet av trn
	}
	
	table.append(tr); // lägger till den skapade trn i slutet av tabellen
}

Resultat av utförd kod:

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

Se även

metoden prepend,
som infogar element i början
metoden appendChild,
som infogar element i slutet
metoden insertBefore,
som infogar ett element före ett element
metoden insertAdjacentElement,
som infogar ett element på en angiven plats
metoden insertAdjacentHTML,
som infogar taggar på en angiven plats