Metoda createElement

Metoda createElement permite crearea unui element nou, trecând în parametru numele tag-ului. După creare, cu elementul se poate lucra ca cu un element obișnuit, iar acesta poate fi adăugat pe pagină cu metodele prepend, append, appendChild, insertBefore sau insertAdjacentElement.

Dacă rezultatul execuției createElement se scrie într-o variabilă, atunci în acea variabilă va fi un astfel de element, ca și cum l-am fi obținut prin querySelector sau getElementById. Singura diferență - elementul nostru nu va fi plasat pe pagină. În rest, putem schimba innerHTML-ul lui, atributele, îi putem atașa handler-e de evenimente și în final îl putem plasa pe pagină.

Sintaxă

javascriptdocument.createElement('numele tag-ului');

Exemplu

Să creăm un paragraf, să îi setăm textul și să îl plasăm pe pagină la sfârșitul blocului #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);

Rezultatul executării codului:

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

Exemplu

Este dat ul. Să plasăm în el 9 tag-uri li, iar textul lor să fie numerele ordinale:

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

Rezultatul executării codului:

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>

Exemplu

Să atașăm elementelor handler-e de evenimente la inserare:

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

Результат:

Vezi și