De prepend methode

De methode prepend maakt het mogelijk om aan het begin van een element een ander element in te voegen. Als parameter accepteert de methode een element, meestal gemaakt via createElement, of een string. Het is mogelijk om meerdere elementen of strings tegelijk toe te voegen, door ze gescheiden door komma's op te sommen.

Syntaxis

ouder.prepend(element of string);

Voorbeeld

Laten we een alinea maken, er tekst aan toewijzen en deze aan het begin van het blok #parent op de pagina plaatsen:

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

Resultaat van de uitgevoerde code:

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

Voorbeeld

Laten we meerdere alinea's tegelijk aan het begin van blok #parent plaatsen:

<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.prepend(p1, p2);

Resultaat van de uitgevoerde code:

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

Voorbeeld

Laten we een string gebruiken als parameter voor de methode:

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

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

Resultaat van de uitgevoerde code:

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

Zie ook

methode append,
die elementen aan het einde invoegt
methode appendChild,
die elementen aan het einde invoegt
methode insertBefore,
die een element voor een element invoegt
methode insertAdjacentElement,
die een element op een opgegeven plaats invoegt
methode insertAdjacentHTML,
die tags op een opgegeven plaats invoegt