Metodas prepend

Metodas prepend leidžia įterpti į kito elemento pradžią kitą elementą. Kaip parametrą metodas priima elementą, paprastai sukurtą naudojant createElement, arba eilutę. Galima pridėti iš karto kelis elementus ar eilutes, išvardijant juos per kablelį.

Sintaksė

tėvinis.prepend(elementas ar eilutė);

Pavyzdys

Sukurkime pastraipą, nustatykime jai tekstą ir patalpinkime puslapyje į bloko #parent pradžią:

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

Kodo vykdymo rezultatas:

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

Pavyzdys

Įterpkime iš karto kelias pastraipas į bloko #parent pradžią:

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

Kodo vykdymo rezultatas:

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

Pavyzdys

Kaip metodo parametrą panaudokime eilutę:

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

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

Kodo vykdymo rezultatas:

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

Taip pat žiūrėkite

metodas append,
kuris įterpia elementus į galą
metodas appendChild,
kuris įterpia elementus į galą
metodas insertBefore,
kuris įterpia elementą prieš elementą
metodas insertAdjacentElement,
kuris įterpia elementą į nurodytą vietą
metodas insertAdjacentHTML,
kuris įterpia žymes į nurodytą vietą