Die createElement-metode

Die metode createElement laat jou toe om 'n nuwe element te skep deur die tag se naam as parameter oor te dra. Na skepping kan jy met die element werk soos met 'n gewone element, en jy kan dit ook by die bladsy voeg met die metodes prepend, append, appendChild, insertBefore of insertAdjacentElement.

As jy die resultaat van createElement se werk in 'n veranderlike stoor, sal daardie veranderlike sodanige element bevat, asof ons dit verkry het deur querySelector of getElementById. Die enigste verskil - ons element sal nie op die bladsy geplaas wees nie. Andersins kan ons die innerHTML verander, eienskappe, gebeurtenishanteerders byvoeg en uiteindelik dit op die bladsy plaas.

Sintaksis

javascriptdocument.createElement('tag naam');

Voorbeeld

Kom ons skep 'n paragraaf, stel die teks daarvoor en plaas dit op die bladsy aan die einde van die blok #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);

Resultaat van die kode-uitvoering:

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

Voorbeeld

Gegee ul. Kom ons plaas 9 li tags daarin, en maak hul teks die volgorde-nommers:

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 die kode-uitvoering:

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

Kom ons koppel gebeurtenishanteerders aan hulle wanneer ons elemente invoeg:

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

Результат:

Sien ook