Усули 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,
    ки тегҳоро дар ҷои муайянкардашуда ворид мекунад