Metode insertAdjacentHTML

Die metode insertAdjacentHTML laat toe om 'n string van HTML-kode enige plek op die bladsy in te voeg. Die kode word relatief tot die verwysingselement ingevoeg. Invoeging voor die verwysingselement is moontlik (invoegmetode 'beforeBegin'), na dit (invoegmetode 'afterEnd'), sowel as aan die begin (invoegmetode 'afterBegin') of aan die einde (invoegmetode 'beforeEnd') van die verwysingselement.

Sintaksis

verwysingselement.insertAdjacentHTML(invoegmetode, kode om in te voeg);

Voorbeeld . Metode beforeBegin

Laat die verwysingselement die element #target wees. Laat ons 'n nuwe paragraaf voor dit invoeg:

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

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

Resultaat van die uitvoering van die kode:

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

Voorbeeld . Metode afterEnd

Laat ons nou 'n nuwe paragraaf na die verwysingselement invoeg:

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

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

Resultaat van die uitvoering van die kode:

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

Voorbeeld . Metode afterBegin

Laat ons 'n nuwe paragraaf aan die begin van die verwysingselement invoeg:

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

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

Resultaat van die uitvoering van die kode:

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

Voorbeeld . Metode beforeEnd

Laat ons 'n nuwe paragraaf aan die einde van die verwysingselement invoeg:

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

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

Resultaat van die uitvoering van die kode:

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

Sien ook

metode insertAdjacentText,
wat teks op 'n gespesifiseerde plek invoeg
metode insertAdjacentElement,
wat 'n element op 'n gespesifiseerde plek invoeg
metode prepend,
wat elemente aan die begin invoeg
metode append,
wat elemente aan die einde invoeg
metode appendChild,
wat elemente aan die einde van 'n ouer invoeg
metode insertBefore,
wat elemente voor 'n element invoeg