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

ebeveyn.prepend(eleman veya string);

Örnek

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

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

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

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

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

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

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

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

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

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

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

Ayrıca Bakınız

elemanları sona ekleyen append metodu
elemanları sona ekleyen appendChild metodu
elemanı başka bir elemandan önce ekleyen insertBefore metodu
elemanı belirtilen yere ekleyen insertAdjacentElement metodu
etiketleri belirtilen yere ekleyen insertAdjacentHTML metodu