Metod createElement

Metod createElement omogućava kreiranje novog elementa prosleđivanjem imena taga kao parametra. Nakon kreiranja, sa elementom se može raditi kao sa običnim elementom, a takođe se može dodati na stranicu metodama prepend, append, appendChild, insertBefore ili insertAdjacentElement.

Ako se rezultat rada createElement upise u promenljivu, u toj promenljivoj će biti element kao da smo ga dobili putem querySelector ili getElementById. Jedina razlika je što naš element neće biti postavljen na stranici. Inače, možemo mu menjati innerHTML, atribute, dodavati osluškivače dogadjaja i na kraju ga postaviti na stranicu.

Sintaksa

javascriptdocument.createElement('ime taga');

Primer

Hajde da kreiramo pasus, postavimo mu tekst i postavimo ga na stranicu na kraju bloka #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);

Rezultat izvršavanja koda:

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

Primer

Dat je ul. Hajde da u njemu postavimo 9 tagova li, i da njihov tekst budu redni brojevi:

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

Rezultat izvršavanja koda:

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>

Primer

Hajde da prilikom umetanja elemenata vezujemo za njih osluškivače dogadjaja:

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

Результат:

Pogledajte takođe