მეთოდი insertAdjacentElement

insertAdjacentElement მეთოდი საშუალებას აძლევს ჩაამატოთ ელემენტი გვერდის ნებისმიერ ადგილას. ყველაზე ხშირად გამოიყენება ელემენტის შექმნის შემდეგ createElement-ის საშუალებით. კოდი ჩასმულია საცნობარო ელემენტთან მიმართებაში. შესაძლებელია ჩასვათ საცნობარო ელემენტის წინ (ჩასმის მეთოდი beforeBegin), მის შემდეგ (ჩასმის მეთოდი afterEnd), ასევე საცნობარო ელემენტის დასაწყისში (ჩასმის მეთოდი afterBegin) ან დასასრულში (ჩასმის მეთოდი beforeEnd).

სინტაქსი

javascriptსაცნობარო ელემენტი.insertAdjacentElement(ჩასმის მეთოდი, ჩასასმელი კოდი);

მაგალითი . მეთოდი beforeBegin

დაე, საცნობარო ელემენტი იყოს #target ელემენტი. ჩავსვათ მის წინ ახალი აბზაცი:

html<div id="target">
  <p>elem</p>
</div>

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

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);

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

html<p>!</p>
<div id="target">
  <p>elem</p>
</div>

მაგალითი . მეთოდი afterEnd

ახლა კი ჩავსვათ ახალი აბზაცი საცნობარო ელემენტის შემდეგ:

html<div id="target">
  <p>elem</p>
</div>

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

let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);

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

html<div id="target">
  <p>elem</p>
</div>
<p>!</p>

მაგალითი . მეთოდი afterBegin

ჩავსვათ ახალი აბზაცი საცნობარო ელემენტის დასაწყისში:

html<div id="target">
  <p>elem</p>
</div>

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

let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);

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

html<div id="target">
  <p>!</p>
  <p>elem</p>
</div>

მაგალითი . მეთოდი beforeEnd

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

html<div id="target">
  <p>elem</p>
</div>

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

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);

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

html<div id="target">
  <p>elem</p>
  <p>!</p>
</div>

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