Opprettelse og innsetting av elementer på JavaScript

Nå skal vi lære å opprette nye DOM-elementer gjennom JavaScript, og deretter legge dem til på siden. For dette formålet er metoden createElement brukt. Parameteren til denne metoden skal være taggnavnet som skal opprettes.

Hvis resultatet av createElement skrives til en variabel, vil variabelen inneholde et slikt element, som om vi hadde fått det via querySelector.

Den eneste forskjellen er at elementet vårt ikke vil være plassert på siden. Men vi kan endre detstekst, attributter, legge på event handlers og til slutt plassere det på siden.

For å plassere det nye elementet på siden brukes metoden appendChild. Denne metoden skal brukes på det elementet som vi ønsker å plassere elementet vårt i. Og parameteren til metoden skal være det nye elementet vårt, som ble opprettet tidligere via createElement.

La oss se på et praktisk eksempel. Anta at vi har en div, og i den - flere avsnitt:

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

La oss opprette et avsnitt, sette detstekst og plassere det på siden på slutten av blokken #parent:

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

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

parent.appendChild(p);

Resultatet av kjøring av koden:

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

Gitt en ol:

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

Sett inn et li med teksten 'item' på slutten av den.

Gitt en ol og en knapp:

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

Gjør slik at ved klikk på knappen legges det til et li med teksten 'item' på slutten av listen.