Метод 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);
};

Результат:

Погледајте такође