Metoda prepend

Metoda prepend permite inserarea la începutul unui element a altui element. Ca parametru, metoda acceptă un element, în general creat prin createElement, sau un șir de caractere. Se pot adăuga mai multe elemente sau șiruri de caractere deodată, enumerându-le prin virgulă.

Sintaxă

părinte.prepend(element sau șir de caractere);

Exemplu

Să creăm un paragraf, să-i setăm textul și să-l plasăm pe pagină la începutul blocului #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);

Rezultatul executării codului:

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

Exemplu

Să plasăm mai multe paragrafe deodată la începutul blocului #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);

Rezultatul executării codului:

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

Exemplu

Să folosim ca parametru al metodei un șir de caractere:

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

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

Rezultatul executării codului:

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

Vedeți și

metoda append,
care inserează elementele la sfârșit
metoda appendChild,
care inserează elementele la sfârșit
metoda insertBefore,
care inserează un element înaintea unui element
metoda insertAdjacentElement,
care inserează un element în locația specificată
metoda insertAdjacentHTML,
care inserează tag-uri în locația specificată