მეთოდი createElement

მეთოდი createElement საშუალებას გაძლევს შექმნათ ახალი ელემენტი, პარამეტრად თეგის სახელის გადაცემით. შექმნის შემდეგ ელემენტთან შესაძლებელია მუშაობა როგორც ჩვეულებრივ ელემენტთან და ასევე მისი გვერდზე დამატება მეთოდებით prepend, append, appendChild, insertBefore ან insertAdjacentElement.

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

სინტაქსი

document.createElement('თეგის სახელი');

მაგალითი

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

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

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>

მაგალითი

მოცემულია ul. განვათავსოთ მასში 9 თეგი li, ხოლო მათი ტექსტი გავხადოთ რიგითი ნომრები:

<ul id="parent"></ul>

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

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	parent.appendChild(li);
}

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

<ul id="parent">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>

მაგალითი

ელემენტების ჩასმისას მივაბათ მათ მოვლენების დამმუშავებლები:

<ul id="parent"></ul>

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

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	
	li.addEventListener('click', function() {
		alert(this.textContent);
	});
	
	parent.appendChild(li);
};

იხილეთ ასევე

მეთოდი cloneNode,
რომლის საშუალებითაც შესაძლებელია ელემენტის კლონირება
მეთოდი createTextNode,
რომლის საშუალებითაც შესაძლებელია ახალი ტექსტური კვანძის შექმნა