Metoden createElement

Metoden createElement lar deg opprette et nytt element ved å sende inn taggnavnet som parameter. Etter opprettelse kan du jobbe med elementet som med et hvilket som helst annet element, og du kan legge det til på siden med metodene prepend, append, appendChild, insertBefore eller insertAdjacentElement.

Hvis du lagrer resultatet av createElement i en variabel, vil variabelen inneholde et element, akkurat som om vi hentet det via querySelector eller getElementById. Den eneste forskjellen er at elementet vårt ikke vil være plassert på siden. Ellers kan vi endre dens innerHTML, attributter, legge til event handlers og til slutt plassere den på siden.

Syntaks

document.createElement('taggnavn');

Eksempel

La oss opprette et avsnitt, sette tekst til det og plassere det på siden på slutten av 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);

Resultat av kjøring av koden:

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

Eksempel

Gitt en ul. La oss plassere 9 stk li-tags i den, og gjøre rekkefølgenummerene til deres tekst:

<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);
}

Resultat av kjøring av 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

La oss koble event handlers til elementene når vi setter dem inn:

<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 brukes til å klone et element
metoden createTextNode,
som kan brukes til å opprette en ny tekstnode