Metoden prepend

Metoden prepend låter dig infoga i början av ett element ett annat element. Som parameter tar metoden ett element, vanligtvis skapat via createElement, eller en sträng. Du kan lägga till flera element eller strängar på en gång genom att lista dem med komma emellan.

Syntax

förälder.prepend(element eller sträng);

Exempel

Låt oss skapa ett stycke, sätta dess text och placera det på sidan i början 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.prepend(p);

Resultat av utförd kod:

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

Exempel

Låt oss placera flera stycken direkt i början av blocket #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 utförd kod:

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

Exempel

Låt oss använda en sträng som parameter för metoden:

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

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

Resultat av utförd kod:

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

Se även

metoden append,
som infogar element i slutet
metoden appendChild,
som infogar element i slutet
metoden insertBefore,
som infogar ett element före ett element
metoden insertAdjacentElement,
som infogar ett element på en angiven plats
metoden insertAdjacentHTML,
som infogar taggar på en angiven plats