createElement metodu

createElement metodu yeni element yaratmağa imkan verir, parametr kimi teq adını ötürerek. Yaradıldıqdan sonra elementlə adi element kimi işləmək olar, həmçinin onu səhifəyə əlavə etmək olar prepend, append, appendChild, insertBefore və ya insertAdjacentElement metodları ilə.

Əgər createElement-in nəticəsini dəyişəndə qeyd etsək, onda bu dəyişəndə elə bir element olacaq ki, sanki onu querySelector və ya getElementById ilə almışıq. Tək fərq - bizim element səhifədə yerləşdirilməyəcək. Amma biz onun innerHTML-ni dəyişə bilərik, atributları, hadisə işləyiciləri əlavə edə bilərik və nəhayət onu səhifədə yerləşdirə bilərik.

Sintaksis

javascriptdocument.createElement('teq adı');

Nümunə

Gəlin abzas yaradaq, ona mətn təyin edək və səhifədə #parent blokunun sonuna yerləşdirək:

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 icrasının nəticəsi:

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

Nümunə

ul verilib. Gəlin onun içinə 9 ədəd li teqi yerləşdirək, onların mətnini sıra nömrələri edək:

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 icrasının nəticəsi:

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>

Nümunə

Gəlin elementləri daxil edərkən onlara hadisə işləyiciləri bağlayaq:

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

Результат:

Həmçinin bax