Metode createElement

Metode createElement ļauj izveidot jaunu elementu, padodot parametrā taga nosaukumu. Pēc izveides ar elementu var strādāt kā ar parastu elementu, un to var arī pievienot lapā, izmantojot metodes prepend, append, appendChild, insertBefore vai insertAdjacentElement.

Ja createElement darbības rezultātu ieraksta mainīgajā, tad šajā mainīgajā būs tāds elements, it kā mēs to būtu ieguvuši caur querySelector vai getElementById. Vienīgā atšķirība - mūsu elements nebūs ievietots lapā. Bet mēs varam mainīt tā innerHTML, atribūtus, pievienot notikumu apstrādātājus un galu galā ievietot to lapā.

Sintakse

document.createElement('taga nosaukums');

Piemērs

Izveidosim rindkopu, iestatīsim tai tekstu un ievietosim lapā bloka #parent beigās:

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

Koda izpildes rezultāts:

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

Piemērs

Ir dots ul. Ievietosim tajā 9 li tagus, un to tekstu padarīsim par kārtas numuriem:

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

Koda izpildes rezultāts:

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

Piemērs

Ievietojot elementus, piesēdināsim tiem notikumu apstrādātājus:

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

Skatiet arī

metode cloneNode,
ar kuras palīdzību var klonēt elementu
metode createTextNode,
ar kuras palīdzību var izveidot jaunu teksta mezglu