Tworzenie i wstawianie elementów w JavaScript

Teraz nauczymy się tworzyć nowe elementy DOM za pomocą JavaScript, a następnie dodawać je na stronę. Służy do tego metoda createElement. Parametrem tej metody należy przekazać nazwę tagu, który ma zostać utworzony.

Jeśli zapiszemy wynik działania createElement w zmiennej, to w tej zmiennej będzie taki element, jakbyśmy otrzymali go przez querySelector.

Jedyna różnica - nasz element nie będzie umieszczony na stronie. Poza tym możemy zmieniać mu tekst, atrybuty, przypinać procedury obsługi zdarzeń i w końcu umieścić go na stronie.

Do umieszczenia nowego elementu na stronie stosuje się metodę appendChild. Tę metodę należy zastosować do tego elementu, do którego chcemy umieścić nasz element. A parametrem metody należy przekazać nasz nowy element, utworzony wcześniej przez createElement.

Spójrzmy na praktyczny przykład. Niech mamy div, a w nim - kilka akapitów:

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

Stwórzmy akapit, ustawmy mu tekst i umieśćmy na stronie na końcu bloku #parent:

javascriptlet parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.appendChild(p);

Wynik wykonania kodu:

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

html<ol id="elem"></ol>

html<ol id="elem"></ol>
<button id="button">click me</button>