Het maken en invoegen van elementen in JavaScript

Nu gaan we leren hoe we nieuwe DOM-elementen kunnen maken via JavaScript, en ze vervolgens kunnen toevoegen aan de pagina. Hiervoor is de methode createElement bedoeld. Aan deze methode moet de naam van de tag worden doorgegeven die moet worden gemaakt.

Als het resultaat van createElement in een variabele wordt opgeslagen, dan bevat die variabele een element, alsof we het hadden verkregen via querySelector.

Het enige verschil is dat ons element niet op de pagina zal zijn geplaatst. Verder kunnen we de tekst, attributen ervan wijzigen, event handlers toevoegen en het uiteindelijk op de pagina plaatsen.

Voor het plaatsen van een nieuw element op de pagina wordt de methode appendChild gebruikt. Deze methode moet worden toegepast op het element waarin we ons element willen plaatsen. En als parameter van de methode moet ons nieuwe element worden doorgegeven, dat eerder is gemaakt via createElement.

Laten we een praktisch voorbeeld bekijken. Stel we hebben een div, en daarin - enkele paragrafen:

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

Laten we een paragraaf maken, er tekst aan toewijzen en deze op de pagina plaatsen, aan het einde van het blok #parent:

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

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

parent.appendChild(p);

Resultaat van het uitvoeren van de code:

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

Gegeven een ol:

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

Voeg aan het einde een li toe met de tekst 'item'.

Gegeven een ol en een knop:

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

Zorg ervoor dat bij een klik op de knop aan het einde van de lijst een li wordt toegevoegd met de tekst 'item'.