Die prepend-metode

Die metode prepend laat toe om aan die begin van 'n element 'n ander element in te voeg. As parameter neem die metode 'n element, gewoonlik geskep deur createElement, of 'n string. Jy kan verskeie elemente of strings gelyktydig byvoeg deur hulle met 'n komma te skei.

Sintaksis

ouer.prepend(element of string);

Voorbeeld

Kom ons skep 'n paragraaf, stel die teks daarin en plaas dit op die bladsy aan die begin van blok #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);

Resultaat van die kode-uitvoering:

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

Voorbeeld

Laat ons verskeie paragrawe gelyktydig aan die begin van blok #parent plaas:

<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 die kode-uitvoering:

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

Voorbeeld

Kom ons gebruik 'n string as parameter van die metode:

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

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

Resultaat van die kode-uitvoering:

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

Sien ook

metode append,
wat elemente aan die einde invoeg
metode appendChild,
wat elemente aan die einde invoeg
metode insertBefore,
wat 'n element voor 'n ander element invoeg
metode insertAdjacentElement,
wat 'n element op 'n gespesifiseerde plek invoeg
metode insertAdjacentHTML,
wat etikette op 'n gespesifiseerde plek invoeg