Метод insertAdjacentHTML

Метод insertAdjacentHTML HTML код сатрини саҳифанинг istalgan joyiga киритиш имконини беради. Код асосiy элементга нисбатан киритилади. Асосiy элемент олдига киритиш амалга оширилиши мумкин (киритиш усули 'beforeBegin'), ундан кейин (киритиш усули 'afterEnd'), шунгингдек, асосiy элементнинг бошланғичига (киритиш усули 'afterBegin') ёки охирига (киритиш усули 'beforeEnd') киритиш мумкин.

Синтаксис

асосiy элемент.insertAdjacentHTML(киритиш усули, киритиладиган код);

Мисол . BeforeBegin усули

Асосiy элемент #target элемент булсин. Унинг олдига янги абзацни киритамиз:

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

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

Коднинг ижроси натижаси:

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

Мисол . AfterEnd усули

Энди асосiy элементдан кейин янги абзацни киритамиз:

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

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

Коднинг ижроси натижаси:

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

Мисол . AfterBegin усули

Асосiy элементнинг бошланғичига янги абзацни киритамиз:

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

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

Коднинг ижроси натижаси:

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

Мисол . BeforeEnd усули

Асосiy элементнинг охирига янги абзацни киритамиз:

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

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

Коднинг ижроси натижаси:

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

Қарашлар

insertAdjacentText методи,
матнни белгиланган жойга киритади
insertAdjacentElement методи,
элементни белгиланган жойга киритади
prepend методи,
элементларни бошланғичга киритади
append методи,
элементларни охирга киритади
appendChild методи,
элементларни ота-онанинг охирига киритади
insertBefore методи,
элементларни элемент олдига киритади