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ė

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

Pavyzdys

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

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

javascriptlet parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.prepend(p);

Kodo vykdymo rezultatas:

html<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ą:

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

javascriptlet 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:

html<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ę:

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

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

Kodo vykdymo rezultatas:

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

Taip pat žiūrėkite