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' տեքստով: