Метод 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 методу,
элементтерди элементтин алдына киргизет

Метод insertAdjacentElement

Синтаксис

Мисал . beforeBegin ыкмасы

Мисал . afterEnd ыкмасы

Мисал . afterBegin ыкмасы

Мисал . beforeEnd ыкмасы

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

Мисал . `beforeBegin` ыкмасы

Мисал . `afterEnd` ыкмасы

Мисал . `afterBegin` ыкмасы

Мисал . `beforeEnd` ыкмасы