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

javascriptdocument.createElement('etiket adı');

Örnek

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

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

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

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

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

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

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

javascriptlet 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