Metoden prepend

Metoden prepend lar deg sette inn i begynnelsen av et element et annet element. Som parameter tar metoden et element, som vanligvis er opprettet via createElement, eller en streng. Du kan legge til flere elementer eller strenger samtidig, ved å liste dem opp med komma mellom.

Syntaks

forelder.prepend(element eller streng);

Eksempel

La oss opprette et avsnitt, sette teksten til det og plassere det på siden i begynnelsen 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.prepend(p);

Resultat av kjøring av koden:

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

Eksempel

La oss plassere flere avsnitt samtidig i begynnelsen av 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);

Resultat av kjøring av koden:

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

Eksempel

La oss bruke 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('!');

Resultat av kjøring av koden:

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

Se også

metoden append,
som setter inn elementer på slutten
metoden appendChild,
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