Metode createElement

Metode createElement ļauj izveidot jaunu elementu, padodot parametrā taga nosaukumu. Pēc izveides ar elementu var strādāt kā ar parastu elementu, un to var arī pievienot lapā, izmantojot metodes prepend, append, appendChild, insertBefore vai insertAdjacentElement.

Ja createElement darbības rezultātu ieraksta mainīgajā, tad šajā mainīgajā būs tāds elements, it kā mēs to būtu ieguvuši caur querySelector vai getElementById. Vienīgā atšķirība - mūsu elements nebūs ievietots lapā. Bet mēs varam mainīt tā innerHTML, atribūtus, pievienot notikumu apstrādātājus un galu galā ievietot to lapā.

Sintakse

javascriptdocument.createElement('taga nosaukums');

Piemērs

Izveidosim rindkopu, iestatīsim tai tekstu un ievietosim lapā bloka #parent beigās:

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

Koda izpildes rezultāts:

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

Piemērs

Ir dots ul. Ievietosim tajā 9 li tagus, un to tekstu padarīsim par kārtas numuriem:

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

Koda izpildes rezultāts:

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>

Piemērs

Ievietojot elementus, piesēdināsim tiem notikumu apstrādātājus:

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

Результат:

Skatiet arī