Krijimi dhe Vendosja e Elementeve në JavaScript

Tani do të mësojmë të krijojmë të rinj elemente DOM përmes JavaScript, dhe pastaj t'i shtojmë ato në faqe. Për këtë qëllim shërben metoda createElement. Si parametër i kësaj metode duhet të jepet emri i tag-ut që duhet të krijohet.

Nëse rezultati i createElement shkruhet në një variabël, atëherë në atë variabël do të ketë element të tillë, sikur ta kishim marrë atë përmes querySelector.

Ndryshimi i vetëm - elementi ynë nuk do të jetë i vendosur në faqe. Përveç kësaj, ne mund t'i ndryshojmë tekstin, atributet, t'i lidhim përpunuesit e ngjarjeve dhe në fund të fundit ta vendosim atë në faqe.

Për vendosjen e elementit të ri në faqe zbatohet metoda appendChild. Kjo metodë duhet të zbatohet tek elementi, brenda të cilit duam të vendosim elementin tonë. Dhe si parametër të metodës duhet të jepet elementi ynë i ri, i krijuar më parë përmes createElement.

Le ta shohim me një shembull praktik. Le të them se kemi një div, dhe brenda tij - disa paragrafë:

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

Le të krijojmë një paragraf, t'i caktojmë tekst dhe ta vendosim në faqe në fund të bllokut #parent:

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.appendChild(p);

Rezultati i ekzekutimit të kodit:

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

Jepet ol:

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

Vendosni në fund të tij li me tekst 'item'.

Jepet ol dhe një buton:

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

Bëni që me klikim në buton në fund të listës të shtohet li me tekst 'item'.