ელემენტების შექმნა და ჩასმა JavaScript-ში

ახლა ჩვენ ვისწავლით ახალი DOM ელემენტების შექმნას JavaScript-ის მეშვეობით და შემდეგ მათი გვერდზე დამატებას. ამისთვის განკუთვნილია მეთოდი createElement. ამ მეთოდის პარამეტრად უნდა გადავცეთ ის ტეგის სახელი, რომლის შექმნაც უნდა მოხდეს.

თუ createElement-ის მუშაობის შედეგს ჩავწერთ ცვლადში, მაშინ ამ ცვლადში იქნება ასეთი ელემენტი, როგორც თუ ჩვენ მივიღებდით მას querySelector-ის მეშვეობით.

ერთადერთი განსხვავება - ჩვენი ელემენტი არ იქნება განთავსებული გვერდზე. ხოლო ასე ჩვენ შეგვიძლია შევცვალოთ მას ტექსტი, ატრიბუტები, დავამატოთ მოვლენების დამმუშავებლები და საბოლოოდ განვათავსოთ იგი გვერდზე.

ახალი ელემენტის გვერდზე განსათავსებლად გამოიყენება მეთოდი appendChild. ეს მეთოდი უნდა იქნას გამოყენებული იმ ელემენტზე, რომლის შიგნითაც გვსურს ჩვენი ელემენტის მოთავსება. ხოლო მეთოდის პარამეტრად უნდა გადავცეთ ჩვენი ახალი ელემენტი, რომელიც ადრე იქნა შექმნილი createElement-ის მეშვეობით.

შევხედოთ პრაქტიკულ მაგალითს. დავუშვათ გვაქვს div, ხოლო მასში - რამდენიმე აბზაცი:

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

შევქმნათ აბზაცი, დავაყენოთ მას ტექსტი და განვათავსოთ გვერდზე ბლოკის #parent ბოლოში:

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

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

parent.appendChild(p);

კოდის შესრულების შედეგი:

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

მოცემულია ol:

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

მისი ბოლოში ჩასვით li ტექსტით 'item'.

მოცემულია ol და ღილაკი:

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

გახადეთ ისე, რომ ღილაკზე დაწკაპუნებით სიის ბოლოში დაემატოს li ტექსტით 'item'.