Methode createElement

De methode createElement maakt het mogelijk een nieuw element te creëren door de tag-naam als parameter mee te geven. Na creatie kan met het element gewerkt worden als een normaal element, en het kan ook aan de pagina toegevoegd worden met de methoden prepend, append, appendChild, insertBefore of insertAdjacentElement.

Als het resultaat van createElement in een variabele wordt opgeslagen, dan bevat die variabele zo'n element, alsof we het hadden verkregen via querySelector of getElementById. Het enige verschil - ons element zal niet op de pagina geplaatst zijn. Verder kunnen we de innerHTML ervan veranderen, attributen, event handlers toevoegen en het uiteindelijk op de pagina plaatsen.

Syntaxis

javascriptdocument.createElement('tag naam');

Voorbeeld

Laten we een paragraaf creëren, er tekst in instellen en deze aan het einde van het blok #parent plaatsen:

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

Resultaat van de code:

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

Voorbeeld

Gegeven een ul. Laten we er 9 li tags in plaatsen, en hun tekst de volgnummers maken:

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

Resultaat van de code:

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>

Voorbeeld

Laten we bij het invoegen van elementen er event handlers aan binden:

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

Результат:

Zie ook