Метод 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>

Ошондой эле караңыз