Mbinu ya insertAdjacentHTML

Mbinu insertAdjacentHTML inaruhusu kuingiza mfuatano wa msimbo wa HTML katika sehemu yoyote ya ukurasa. Msimbo huo unaingizwa ukilinganisha na kipengele cha msingi. Inawezekana kufanya uingizaji kabla ya kipengele cha msingi (njia ya uingizaji 'beforeBegin'), baada yake (njia ya uingizaji 'afterEnd'), vile vile mwanzoni (njia ya uingizaji 'afterBegin') au mwishoni (njia ya uingizaji 'beforeEnd') kipengele cha msingi.

Kisarufu

kipengele cha msingi.insertAdjacentHTML(njia ya uingizaji, msimbo wa kuingiza);

Mfano . Njia ya beforeBegin

Wacha kipengele cha msingi kiwe kipengele #target. Tuingize aya mpya kabla yake:

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

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

Matokeo ya utekelezaji wa msimbo:

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

Mfano . Njia ya afterEnd

Sasa tuingize aya mpya baada ya kipengele cha msingi:

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

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

Matokeo ya utekelezaji wa msimbo:

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

Mfano . Njia ya afterBegin

Tuingize aya mpya mwanzoni mwa kipengele cha msingi:

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

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

Matokeo ya utekelezaji wa msimbo:

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

Mfano . Njia ya beforeEnd

Tuingize aya mpya mwishoni mwa kipengele cha msingi:

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

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

Matokeo ya utekelezaji wa msimbo:

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

Angalia pia

mbinu insertAdjacentText,
ambayo inaingiza maandishi katika eneo lililobainishwa
mbinu insertAdjacentElement,
ambayo inaingiza kipengele katika eneo lililobainishwa
mbinu prepend,
ambayo inaingiza vipelele mwanzoni
mbinu append,
ambayo inaingiza vipelele mwishoni
mbinu appendChild,
ambayo inaingiza vipelele mwishoni mwa mzazi
mbinu insertBefore,
ambayo inaingiza vipelele kabla ya kipengele