Oprettelse og indsættelse af elementer i JavaScript

Nu skal vi lære at oprette nye DOM-elementer via JavaScript og derefter tilføje dem til siden. Til dette formål bruges metoden createElement. Parameteren for denne metode skal være navnet på det tag, der skal oprettes.

Hvis resultatet af createElement gemmes i en variabel, vil denne variabel indeholde et element, som om vi havde fået det via querySelector.

Den eneste forskel er, at vores element ikke vil være placeret på siden. Men vi kan ændre dets tekst, attributter, tilføje event handlers og til sidst placere det på siden.

For at placere det nye element på siden bruges metoden appendChild. Denne metode skal anvendes på det element, i hvilket vi vil placere vores element. Og parameteren for metoden skal være vores nye element, som tidligere blev oprettet via createElement.

Lad os se på et praktisk eksempel. Antag at vi har en div, og i den - flere afsnit:

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

Lad os oprette et afsnit, sætte dets tekst og placere det på siden i slutningen af blokken #parent:

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

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

parent.appendChild(p);

Resultatet af koden:

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

Givet en ol:

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

Indsæt en li med teksten 'item' i slutningen af den.

Givet en ol og en knap:

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

Gør sådan, at ved et klik på knappen tilføjes en li med teksten 'item' til slutningen af listen.