Методот prepend

Методот prepend овозможува вметнување на почетокот на одреден елемент на друг елемент. Како параметар методот прифаќа елемент, кој обично е создаден преку createElement, или низа. Може да додадете веднаш неколку елементи или низи, наведувајќи ги разделени со запирка.

Синтакса

javascriptродител.prepend(елемент или низа);

Пример

Ајде да создадеме пасус, да поставиме текст за него и да го поставиме на страницата на почетокот на блокот #parent:

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

Резултат од извршувањето на кодот:

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

Пример

Ајде веднаш да поставиме неколку пасуси на почетокот на блокот #parent:

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

Резултат од извршувањето на кодот:

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

Пример

Ајде како параметар на методот да користиме низа:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>
javascriptlet parent = document.querySelector('#parent');
parent.prepend('!');

Резултат од извршувањето на кодот:

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

Погледнете ги исто така

  • методот append,
    кој вметнува елементи на крајот
  • методот appendChild,
    кој вметнува елементи на крајот
  • методот insertBefore,
    кој вметнува елемент пред елемент
  • методот insertAdjacentElement,
    кој вметнува елемент на зададено место
  • методот insertAdjacentHTML,
    кој вметнува тагови на зададено место