Elementide loomine ja lisamine JavaScriptis

Nüüd õpime looma uusi DOM elemente JavaScripti kaudu ja seejärel lisama neid lehele. Selleks on mõeldud meetod createElement. Selle meetodi parameetrina tuleks edastada sildi nimi, mis tuleb luua.

Kui createElement töö tulemus kirjutada muutujasse, siis selles muutujas on element, justkui saaksime selle läbi querySelector.

Ainus erinevus - meie elementi ei paigutata lehele. Kuid nii saame muuta selle teksti, atribuute, lisada sündmuste käitlejaid ja lõpuks paigutada selle lehele.

Uue elemendi lehele paigutamiseks kasutatakse meetodit appendChild. Seda meetodit tuleks rakendada sellele elemendile, millesse me tahame oma elemendi paigutada. Ja meetodi parameetrina tuleks edastada meie uus element, mille lõime varem läbi createElement.

Vaatame praktilist näidet. Oletame, et meil on div ja selles - mitu lõiku:

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

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

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>

Antud ol:

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

Lisage selle lõppu li tekstiga 'item'.

Antud ol ja nupp:

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

Tehke nii, et nupule vajutades loendi lõppu lisataks li tekstiga 'item'.