Metoden appendChild

Metoden appendChild lar deg sette inn et annet element på slutten av et element. Den brukes oftest etter å ha opprettet et element med createElement.

Syntaks

forelder.appendChild(element);

Eksempel

La oss opprette et avsnitt, sette tekst til det og plassere det på siden på slutten av blokken #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);

Resultatet av kjøring av koden:

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

Eksempel

Det er gitt en ul. La oss plassere 9 stk. li-elementer i den, og gjøre rekkefølgenummer til deres tekst:

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

Resultatet av kjøring av koden:

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

Eksempel

La oss fylle tabellen med tr-er og td-er:

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

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // oppretter tr
	
	// Fyller tr med td-er:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // oppretter td
		td.textContent = j; // skriver tekst til den
		
		tr.appendChild(td); // legger til den opprettede td-en på slutten av tr-en
	}
	
	table.appendChild(tr); // legger til den opprettede tr-en på slutten av tabellen
}

Resultatet av kjøring av koden:

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

metoden append,
som setter inn elementer på slutten
metoden insertBefore,
som setter inn et element før et element
metoden insertAdjacentElement,
som setter inn et element på et angitt sted
metoden insertAdjacentHTML,
som setter inn tagger på et angitt sted