Metoden prepend

Metoden prepend gør det muligt at indsætte et andet element i begyndelsen af et element. Som parameter tager metoden et element, som som regel er oprettet via createElement, eller en streng. Det er muligt at tilføje flere elementer eller strenge på én gang ved at angive dem adskilt af komma.

Syntaks

forælder.prepend(element eller streng);

Eksempel

Lad os oprette et afsnit, sætte dets tekst og placere det på siden i begyndelsen af 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.prepend(p);

Resultatet af udførelsen af koden:

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

Eksempel

Lad os placere flere afsnit på én gang i begyndelsen af blokken #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.prepend(p1, p2);

Resultatet af udførelsen af koden:

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

Eksempel

Lad os bruge en streng som parameter for metoden:

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

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

Resultatet af udførelsen af koden:

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

Se også

metoden append,
som indsætter elementer i slutningen
metoden appendChild,
som indsætter elementer i slutningen
metoden insertBefore,
som indsætter et element før et element
metoden insertAdjacentElement,
som indsætter et element på et angivet sted
metoden insertAdjacentHTML,
som indsætter tags på et angivet sted