insertAdjacentHTML методу

insertAdjacentHTML методу HTML коддун сабын барактын каалаган жерине киргизүүгө мүмкүндүк берет. Код негизги элементке салыштырмалуу киргизилет. Негизги элементтин алдына киргизүү жасаса болот (киргизүү ыкмасы 'beforeBegin'), анын артына (киргизүү ыкмасы 'afterEnd'), ошондой эле негизги элементтин башына (киргизүү ыкмасы 'afterBegin') же аягына (киргизүү ыкмасы 'beforeEnd') киргизүү жасаса болот.

Синтаксис

негизги элемент.insertAdjacentHTML(киргизүү ыкмасы, киргизүүчү код);

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

Негизги элемент #target элементи болсун. Анын алдына жаңы абзацты киргизели:

<div id="target">
	<p>элемент</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('beforeBegin', '<p>!</p>');

Кодду иштетүүнүн натыйжасы:

<p>!</p>
<div id="target">
	<p>элемент</p>
</div>

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

Эми жаңы абзацты негизги элементтин артына киргизели:

<div id="target">
	<p>элемент</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('afterEnd', '<p>!</p>');

Кодду иштетүүнүн натыйжасы:

<div id="target">
	<p>элемент</p>
</div>
<p>!</p>

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

Жаңы абзацты негизги элементтин башына киргизели:

<div id="target">
	<p>элемент</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('afterBegin', '<p>!</p>');

Кодду иштетүүнүн натыйжасы:

<div id="target">
	<p>!</p>
	<p>элемент</p>
</div>

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

Жаңы абзацты негизги элементтин аягына киргизели:

<div id="target">
	<p>элемент</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('beforeEnd', '<p>!</p>');

Кодду иштетүүнүн натыйжасы:

<div id="target">
	<p>элемент</p>
	<p>!</p>
</div>

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

insertAdjacentText методу,
белгилүү бир жерге текстти киргизет
insertAdjacentElement методу,
белгилүү бир жерге элементти киргизет
prepend методу,
элементтерди башына киргизет
append методу,
элементтерди аягына киргизет
appendChild методу,
элементтерди ата-энесинин аягына киргизет
insertBefore методу,
элементтерди элементтин алдына киргизет