JavaScript'te Eleman Oluşturma ve Ekleme

Şimdi JavaScript aracılığıyla yeni DOM elemanları oluşturmayı ve ardından bunları sayfaya eklemeyi öğreneceğiz. Bunun için createElement metodu kullanılır. Bu metodun parametresi olarak oluşturulacak etiketin adı verilmelidir.

createElement'in çalışma sonucu bir değişkene yazılırsa, bu değişkende sanki onu querySelector ile almışız gibi bir eleman bulunur.

Tek fark - elemanımız sayfada yer almayacaktır. Bununla birlikte ona metin değiştirebilir, nitelikler ekleyebilir, olay işleyicileri atayabilir ve sonunda onu sayfaya yerleştirebiliriz.

Sayfaya yeni bir eleman yerleştirmek için appendChild metodu kullanılır. Bu metod elemanı, elemanı *içine* koymak istediğimiz elemana uygulanmalıdır. Metodun parametresi olarak daha önce createElement ile oluşturduğumuz yeni elemanımız verilmelidir.

Pratik bir örnek üzerinden inceleyelim. Diyelim ki bir div'imiz ve içinde birkaç paragraf var:

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

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

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

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

parent.appendChild(p);

Kodun çalıştırılma sonucu:

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

Bir ol veriliyor:

<ol id="elem"></ol>

Sonuna metni 'item' olan bir li ekleyin.

Bir ol ve düğme veriliyor:

<ol id="elem"></ol>
<button id="button">click me</button>

Düğmeye tıklandığında listenin sonuna metni 'item' olan bir li eklenecek şekilde ayarlayın.