createElement Metodu

createElement metodu, parametre olarak bir etiket adı ileterek yeni bir element oluşturmayı sağlar. Oluşturulduktan sonra elementle normal bir element gibi çalışılabilir, ayrıca prepend, append, appendChild, insertBefore veya insertAdjacentElement metotlarıyla sayfaya eklenebilir.

createElement'in çalışma sonucu bir değişkene yazılırsa, bu değişkende, sanki onu querySelector veya getElementById ile almışız gibi bir element olur. Tek fark - elementimiz sayfada yer almayacaktır. Ama bununla birlikte, innerHTML'ini değiştirebilir, niteliklerini değiştirebilir, olay dinleyicileri ekleyebilir ve sonuçta onu sayfaya yerleştirebiliriz.

Sözdizimi

document.createElement('etiket adı');

Örnek

Bir paragraf oluşturalım, ona bir metin belirleyelim ve sayfada #parent bloğunun sonuna 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.appendChild(p);

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

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

Örnek

Bir ul verilsin. İçine 9 tane li etiketi yerleştirelim ve metinlerini sıra numaraları yapalım:

<ul id="parent"></ul>

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

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	parent.appendChild(li);
}

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

<ul id="parent">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>

Örnek

Elementleri eklerken onlara olay dinleyicileri bağlayalım:

<ul id="parent"></ul>

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

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	
	li.addEventListener('click', function() {
		alert(this.textContent);
	});
	
	parent.appendChild(li);
};

Ayrıca Bakınız

bir elementi klonlamak için kullanılan cloneNode metodu
yeni bir metin düğümü oluşturmak için kullanılan createTextNode metodu