Elementu izveide un ievietošana JavaScript

Tagad mēs iemācīsimies izveidot jaunus DOM elementus caur JavaScript un pēc tam pievienot tos lapā. Šim nolūkam ir paredzēta metode createElement. Šīs metodes parametrā jānodod tā atzīmes nosaukums, kuru vajag izveidot.

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.

Vienīgā atšķirība - mūsu elements vēl nebūs ievietots lapā. Bet mēs varam mainīt tā tekstu, atribūtus, pievienot notikumu apstrādātājus un galu galā ievietot to lapā.

Lai ievietotu jaunu elementu lapā, tiek izmantota metode appendChild. Šī metode jālieto uz tā elementa, kurā mēs vēlamies ievietot mūsu elementu. Bet metodes parametrā jānodod mūsu jaunais elements, kas iepriekš izveidots caur createElement.

Apskatīsim praktiskā piemērā. Pieņemsim, ka mums ir div, un tajā - vairāki rindkopas:

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

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

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>

Dots ol:

<ol id="elem"></ol>

Ievietojiet tam beigās li ar tekstu 'item'.

Dots ol un poga:

<ol id="elem"></ol>
<button id="button">click me</button>

Izveidojiet tā, lai, noklikšķinot uz pogas, saraksta beigās tiktu pievienots li ar tekstu 'item'.