Методот createElement

Методот createElement овозможува креирање на нов елемент со пренесување на името на тагот како параметар. По креирањето, со елементот може да се работи како со обичен елемент, а исто така може да се додаде на страницата со методите prepend, append, appendChild, insertBefore или insertAdjacentElement.

Ако резултатот од работата на createElement се запише во променлива, тогаш во таа променлива ќе има таков елемент, како да сме го добиле преку querySelector или getElementById. Единствената разлика - нашиот елемент нема да биде поставен на страницата. А инаку можеме да му го менуваме innerHTML, атрибутите, да додаваме обработувачи на настани и на крајот да го поставиме на страницата.

Синтакса

javascriptdocument.createElement('име на таг');

Пример

Ајде да креираме параграф, да поставиме текст во него и да го поставиме на страницата на крајот од блокот #parent:

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

Резултат од извршувањето на кодот:

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

Пример

Даден е ul. Ајде да поставиме во него 9 тагови li, при што нивниот текст ќе ги содржи редните броеви:

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

Резултат од извршувањето на кодот:

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>

Пример

Ајде при вметнување на елементи да врзуваме кон нив обработувачи на настани:

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

Результат:

Погледнете ги и