Metoden createElement

Metoden createElement giver mulighed for at oprette et nyt element ved at overføre tag-navnet i parameteren. Efter oprettelse kan du arbejde med elementet som med et almindeligt element, og det kan også tilføjes til siden med metoderne prepend, append, appendChild, insertBefore eller insertAdjacentElement.

Hvis resultatet af createElement skrives i en variabel, vil denne variabel indeholde et sådant element, som om vi havde fået det via querySelector eller getElementById. Den eneste forskel er, at vores element ikke vil være placeret på siden. Men vi kan ændre dets innerHTML, attributter, tilføje event handlers og til sidst placere det på siden.

Syntaks

document.createElement('tag navn');

Eksempel

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

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

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

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

parent.appendChild(p);

Resultatet af udførelsen af koden:

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

Eksempel

Givet ul. Lad os placere 9 li tags i den, og gøre deres tekst til sekventielle numre:

<ul id="parent"></ul>

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

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	parent.appendChild(li);
}

Resultatet af udførelsen af koden:

<ul id="parent">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>

Eksempel

Lad os ved indsættelse af elementer tilknytte event handlers til dem:

<ul id="parent"></ul>

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

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	
	li.addEventListener('click', function() {
		alert(this.textContent);
	});
	
	parent.appendChild(li);
};

Se også

metoden cloneNode,
som kan bruges til at klone et element
metoden createTextNode,
som kan bruges til at oprette en ny tekstnode