Skapa och infoga element med JavaScript

Nu ska vi lära oss att skapa nya DOM-element via JavaScript och sedan lägga till dem på sidan. För detta används metoden createElement. Parametern till denna metod bör vara taggnamnet för elementet som ska skapas.

Om resultatet av createElement sparas i en variabel, kommer den variabeln att innehålla ett element, som om vi hade hämtat det via querySelector.

Den enda skillnaden är att vårt element inte kommer att vara placerat på sidan. Men vi kan ändra dess text, attribut, lägga på händelsehanterare och slutligen placera det på sidan.

För att placera det nya elementet på sidan används metoden appendChild. Denna metod skall appliceras på det element i vilket vi vill placera vårt element. Och parametern till metoden ska vara vårt nya element, som skapats tidigare via createElement.

Låt oss titta på ett praktiskt exempel. Antag att vi har en div, och i den - flera stycken:

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

Låt oss skapa ett stycke, sätta dess text och placera det på sidan i slutet av blocket #parent:

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

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

parent.appendChild(p);

Resultatet av att köra koden:

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

Given en ol:

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

Sätt in ett li med texten 'item' i slutet av den.

Given en ol och en knapp:

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

Gör så att när man klickar på knappen läggs ett li till i slutet av listan med texten 'item'.