insertAdjacentHTML метод

Метод insertAdjacentHTML имкон медиҳад, ки сатри HTML код ба ҳар як ҷои саҳифа ворид карда шавад. Код нисбат ба унсури асосӣ ворид карда мешавад. Мумкин аст пеш аз унсури асосӣ ворид карда шавад (усули воридкунӣ 'beforeBegin'), пас аз он (усули воридкунӣ 'afterEnd'), ҳамчунин дар аввал (усули воридкунӣ 'afterBegin') ё дар охир (усули воридкунӣ 'beforeEnd') унсури асосӣ ворид карда шавад.

Синтаксис

унсури асосӣ.insertAdjacentHTML(усули воридкунӣ, код барои воридкунӣ);

Намуна . Усули beforeBegin

Бигзор унсури асосӣ - ин унсури #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

Ва ҳоло абзаци навро баъд аз унсури асосӣ ворид мекунем:

<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

Абзаци навро дар аввали унсури асосӣ ворид мекунем:

<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

Абзаци навро дар охири унсури асосӣ ворид мекунем:

<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,
ки унсурҳоро пеш аз унсур ворид мекунад