Meetod createElement

Meetod createElement võimaldab luua uue elemendi, edastades parameetrina silti nime. Pärast loomist saab elemendiga töötada nagu tavalise elemendiga, ning seda saab lehele lisada meetoditega prepend, append, appendChild, insertBefore või insertAdjacentElement.

Kui kirjutada createElement töö tulemuse muutujasse, siis selles muutujas on selline element, nagu oleksime selle saanud läbi querySelector või getElementById. Ainus erinevus - meie elementi ei ole lehel paigutatud. Muidu saame muuta selle innerHTML-i, atribuute, lisada sündmuste kuulajad ja lõpuks paigutada selle lehele.

Süntaks

javascriptdocument.createElement('sildi nimi');

Näide

Loome lõigu, määrame sellele teksti ja paneme selle lehele ploki #parent lõppu:

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

Koodi täitmise tulemus:

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

Näide

Antud on ul. Paneme sellesse 9 li silti, muutes nende tekstiks järjekorranumbrid:

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

Koodi täitmise tulemus:

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>

Näide

Lisame elementide sisestamisel neile sündmuste kuulajad:

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

Результат:

Vaata ka