createElement-metodi

Metodi createElement mahdollistaa uuden elementin luomisen antamalla parametrina tagin nimen. Luomisen jälkeen elementtiin voidaan työskennellä kuin tavalliseen elementtiin, ja se voidaan myös lisätä sivuille metodeilla prepend, append, appendChild, insertBefore tai insertAdjacentElement.

Jos createElement:in toiminnan tulos kirjoitetaan muuttujaan, tässä muuttujassa on sellainen elementti, aivan kuin olisimme saaneet sen querySelector:in tai getElementById:n kautta. Ainoa ero - elementtiämme ei ole sijoitettu sivulle. Mutta voimme muuttaa sille innerHTML:ää, attribuutteja, lisätä tapahtumankäsittelijöitä ja lopulta sijoittaa sen sivulle.

Syntaksi

document.createElement('tagin nimi');

Esimerkki

Luodaan kappale, asetetaan sille teksti ja sijoitetaan se sivun #parent-lohkon loppuun:

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

Koodin suorituksen tulos:

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

Esimerkki

Annettu ul. Siirretään siihen 9 li-tagia, ja tehdään niiden tekstistä järjestysnumerot:

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

Koodin suorituksen tulos:

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

Esimerkki

Lisätään elementteihin tapahtumankäsittelijöitä niitä lisättäessä:

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

Katso myös

metodi cloneNode,
jolla voidaan kloonata elementti
metodi createTextNode,
jolla voidaan luoda uusi tekstisolmu