მეთოდი insertAdjacentElement
insertAdjacentElement მეთოდი საშუალებას აძლევს
ჩაამატოთ ელემენტი გვერდის ნებისმიერ ადგილას.
ყველაზე ხშირად გამოიყენება ელემენტის შექმნის შემდეგ
createElement-ის საშუალებით.
კოდი ჩასმულია საცნობარო
ელემენტთან მიმართებაში. შესაძლებელია ჩასვათ საცნობარო ელემენტის წინ
(ჩასმის მეთოდი beforeBegin),
მის შემდეგ (ჩასმის მეთოდი afterEnd),
ასევე საცნობარო ელემენტის დასაწყისში (ჩასმის მეთოდი afterBegin)
ან დასასრულში (ჩასმის მეთოდი beforeEnd).
სინტაქსი
საცნობარო ელემენტი.insertAdjacentElement(ჩასმის მეთოდი, ჩასასმელი კოდი);
მაგალითი . მეთოდი beforeBegin
დაე, საცნობარო ელემენტი იყოს #target ელემენტი.
ჩავსვათ მის წინ ახალი აბზაცი:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
კოდის შესრულების შედეგი:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
მაგალითი . მეთოდი afterEnd
ახლა კი ჩავსვათ ახალი აბზაცი საცნობარო ელემენტის შემდეგ:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
კოდის შესრულების შედეგი:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
მაგალითი . მეთოდი afterBegin
ჩავსვათ ახალი აბზაცი საცნობარო ელემენტის დასაწყისში:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
კოდის შესრულების შედეგი:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
მაგალითი . მეთოდი beforeEnd
ჩავსვათ ახალი აბზაცი საცნობარო ელემენტის დასასრულში:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
კოდის შესრულების შედეგი:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
იხილეთ აგრეთვე
-
მეთოდი
insertAdjacentHTML,
რომელიც ტეგებს ჩასვამს მითითებულ ადგილას -
მეთოდი
insertAdjacentText,
რომელიც ტექსტს ჩასვამს მითითებულ ადგილას -
მეთოდი
prepend,
რომელიც ელემენტებს ჩასვამს დასაწყისში -
მეთოდი
append,
რომელიც ელემენტებს ჩასვამს დასასრულში -
მეთოდი
appendChild,
რომელიც ელემენტებს ჩასვამს მშობელის დასასრულში -
მეთოდი
insertBefore,
რომელიც ელემენტებს ჩასვამს ელემენტის წინ
