prepend Metodu

prepend metodu, bir elemanın başlangıcına başka bir eleman eklemeye izin verir. Parametre olarak genellikle createElement ile oluşturulmuş bir elemanı veya bir string'i kabul eder. Virgülle ayırarak aynı anda birden fazla eleman veya string ekleyebilirsiniz.

Sözdizimi

javascriptebeveyn.prepend(eleman veya string);

Örnek

Bir paragraf oluşturalım, ona bir metin belirleyelim ve sayfada #parent bloğunun başına yerleştirelim:

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

Kodun çalıştırılmasının sonucu:

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

Örnek

Hemen birkaç paragrafı #parent bloğunun başına yerleştirelim:

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

Kodun çalıştırılmasının sonucu:

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

Örnek

Metodun parametresi olarak bir string kullanalım:

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

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

Kodun çalıştırılmasının sonucu:

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

Ayrıca Bakınız