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:

<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:

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

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

parent.appendChild(p);

Wynik wykonania kodu:

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

Dany ol:

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

Wstaw mu na koniec li z tekstem 'item'.

Dany ol i przycisk:

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

Spraw, aby po kliknięciu przycisku na koniec listy był dodawany li z tekstem 'item'.