Metode insertAdjacentHTML

Metode insertAdjacentHTML ļauj ievietot HTML koda virkni jebkurā lapas vietā. Kods tiek ievietots attiecībā pret atsauces elementu. Var veikt ievietošanu pirms atsauces elementa (ievietošanas veids 'beforeBegin'), pēc tā (ievietošanas veids 'afterEnd'), kā arī ievietošanu iesākumā (ievietošanas veids 'afterBegin') vai beigās (ievietošanas veids 'beforeEnd') atsauces elementa.

Sintakse

atsauces elements.insertAdjacentHTML(ievietošanas veids, kods ievietošanai);

Piemērs . Veids beforeBegin

Lai atsauces elements ir elements #target. Ievietosim pirms tā jaunu rindkopu:

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

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

Koda izpildes rezultāts:

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

Piemērs . Veids afterEnd

Un tagad ievietosim jaunu rindkopu pēc atsauces elementa:

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

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

Koda izpildes rezultāts:

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

Piemērs . Veids afterBegin

Ievietosim jaunu rindkopu atsauces elementa iesākumā:

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

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

Koda izpildes rezultāts:

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

Piemērs . Veids beforeEnd

Ievietosim jaunu rindkopu atsauces elementa beigās:

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

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

Koda izpildes rezultāts:

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

Skatiet arī

metode insertAdjacentText,
kas ievieto tekstu norādītajā vietā
metode insertAdjacentElement,
kas ievieto elementu norādītajā vietā
metode prepend,
kas ievieto elementus sākumā
metode append,
kas ievieto elementus beigās
metode appendChild,
kas ievieto elementus vecāka elementa beigās
metode insertBefore,
kas ievieto elementus pirms elementa