Die Methode prepend

Die Methode prepend ermöglicht es, ein anderes Element am Anfang eines beliebigen Elements einzufügen. Als Parameter akzeptiert die Methode ein Element, in der Regel erstellt über createElement, oder einen String. Es können sofort mehrere Elemente oder Strings hinzugefügt werden, indem sie durch Kommas aufgelistet werden.

Syntax

Elternelement.prepend(Element oder String);

Beispiel

Lassen Sie uns einen Absatz erstellen, seinen Text festlegen und ihn am Anfang des Blocks #parent auf der Seite platzieren:

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

Ergebnis der Codeausführung:

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

Beispiel

Lassen Sie uns sofort mehrere Absätze am Anfang des Blocks #parent platzieren:

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

Ergebnis der Codeausführung:

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

Beispiel

Lassen Sie uns einen String als Parameter der Methode verwenden:

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

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

Ergebnis der Codeausführung:

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

Siehe auch

die Methode append,
die Elemente am Ende einfügt
die Methode appendChild,
die Elemente am Ende einfügt
die Methode insertBefore,
die ein Element vor einem anderen Element einfügt
die Methode insertAdjacentElement,
die ein Element an einer bestimmten Stelle einfügt
die Methode insertAdjacentHTML,
die HTML-Code an einer bestimmten Stelle einfügt