Meetod createElement

Meetod createElement võimaldab luua uue elemendi, edastades parameetrina silti nime. Pärast loomist saab elemendiga töötada nagu tavalise elemendiga, ning seda saab lehele lisada meetoditega prepend, append, appendChild, insertBefore või insertAdjacentElement.

Kui kirjutada createElement töö tulemuse muutujasse, siis selles muutujas on selline element, nagu oleksime selle saanud läbi querySelector või getElementById. Ainus erinevus - meie elementi ei ole lehel paigutatud. Muidu saame muuta selle innerHTML-i, atribuute, lisada sündmuste kuulajad ja lõpuks paigutada selle lehele.

Süntaks

document.createElement('sildi nimi');

Näide

Loome lõigu, määrame sellele teksti ja paneme selle lehele ploki #parent lõppu:

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

Koodi täitmise tulemus:

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

Näide

Antud on ul. Paneme sellesse 9 li silti, muutes nende tekstiks järjekorranumbrid:

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

Koodi täitmise tulemus:

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

Näide

Lisame elementide sisestamisel neile sündmuste kuulajad:

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

Vaata ka

meetod cloneNode,
mille abil saab elementi kloonida
meetod createTextNode,
mille abil saab luua uue tekstisõlme