insertBefore მეთოდი

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

სინტაქსი

მშობელი.insertBefore(ელემენტი, ვის წინ ჩასვათ);

მაგალითი

შევქმნათ აბზაცი და მოვათავსოთ იგი მეორე აბზაცის წინ:

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

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

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

parent.insertBefore(p, before);

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

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

მაგალითი

დავამატოთ აბზაცი ელემენტის #parent დასაწყისში. ამისთვის ჩავსვამთ ჩვენს აბზაცს #parent-ის პირველი შვილის წინ. ამ შვილის პოვნა შეგვიძლია firstElementChild-ის საშუალებით:

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

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

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

parent.insertBefore(p, parent.firstElementChild);

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

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

მაგალითი

null-ის მეორე პარამეტრად გადაცემისას insertBefore მეთოდი მუშაობს როგორც appendChild. ამავე დროს, თუ ელემენტს არ აქვს შვილი ელემენტები, firstElementChild აბრუნებს null. შესაბამისად, ელემენტის დასაწყისში დამატება შესაძლებელია მაშინაც კი, როცა მას არ აქვს შვილი ელემენტები:

<div id="parent"></div>

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

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

parent.insertBefore(p, parent.firstChild);

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

<div id="parent">
	<p>!</p>
</div>

იხილეთ აგრეთვე

მეთოდი prepend,
რომელიც ჩასვამს ელემენტებს დასაწყისში
მეთოდი appendChild,
რომელიც ჩასვამს ელემენტებს მშობლის ბოლოში
მეთოდი insertAdjacentElement,
რომელიც ჩასვამს ელემენტს მითითებულ ადგილას
მეთოდი insertAdjacentHTML,
რომელიც ჩასვამს ტეგებს მითითებულ ადგილას