Metoden appendChild

Metoden appendChild låter dig sätta in ett annat element i slutet av ett element. Oftast används den efter att ha skapat ett element med createElement.

Syntax

förälder.appendChild(element);

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

Resultat av kodkörning:

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

Exempel

Det finns en 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.appendChild(li);
}

Resultat av kodkörning:

<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:or och td:or:

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

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

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

Resultat av kodkörning:

<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 append,
som sätter in element i slutet
metoden insertBefore,
som sätter in ett element före ett element
metoden insertAdjacentElement,
som sätter in ett element på en given plats
metoden insertAdjacentHTML,
som sätter in taggar på en given plats