Metoden createElement

Metoden createElement låter dig skapa ett nytt element genom att skicka med taggnamnet som parameter. Efter att elementet skapats kan du arbeta med det som med vilket element som helst, och du kan även lägga till det på sidan med metoderna prepend, append, appendChild, insertBefore eller insertAdjacentElement.

Om du sparar resultatet av createElement i en variabel, kommer den variabeln att innehålla ett element, precis som om vi hade hämtat det via querySelector eller getElementById. Den enda skillnaden är att vårt element inte kommer att vara placerat på sidan. För övrigt kan vi ändra dess innerHTML, attribut, lägga på händelsehanterare och så småningom placera det på sidan.

Syntax

document.createElement('tagnamn');

Exempel

Låt oss skapa ett stycke, sätta dess text och placera det på sidan i slutet av blocket #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 koden:

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

Exempel

Givet ett ul. Låt oss placera 9 st li-taggar i det, och göra deras text till ordningsnummer:

<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 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>

Exempel

Låt oss när vi sätter in element koppla händelsehanterare till 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 även

metoden cloneNode,
som kan användas för att klona ett element
metoden createTextNode,
som kan användas för att skapa en ny textnod