Metodas insertAdjacentHTML

Metodas insertAdjacentHTML leidžia įterpti HTML kodo eilutę bet kurioje puslapio vietoje. Kodas įterpiamas atraminio elemento atžvilgiu. Galima atlikti įterpimą prieš atraminį elementą (įterpimo būdas 'beforeBegin'), po jo (įterpimo būdas 'afterEnd'), taip pat į pradžią (įterpimo būdas 'afterBegin') arba į pabaigą (įterpimo būdas 'beforeEnd') atraminio elemento.

Sintaksė

atraminis elementas.insertAdjacentHTML(įterpimo būdas, įterpiamas kodas);

Pavyzdys . Būdas beforeBegin

Tegu atraminis elementas - elementas #target. Įterpkime prieš jį naują pastraipą:

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

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

Kodo vykdymo rezultatas:

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

Pavyzdys . Būdas afterEnd

O dabar įterpkime naują pastraipą po atraminio elemento:

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

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

Kodo vykdymo rezultatas:

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

Pavyzdys . Būdas afterBegin

Įterpkime naują pastraipą į atraminio elemento pradžią:

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

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

Kodo vykdymo rezultatas:

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

Pavyzdys . Būdas beforeEnd

Įterpkime naują pastraipą į atraminio elemento pabaigą:

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

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

Kodo vykdymo rezultatas:

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

Taip pat žiūrėkite

metodas insertAdjacentText,
kuris įterpia tekstą į nurodytą vietą
metodas insertAdjacentElement,
kuris įterpia elementą į nurodytą vietą
metodas prepend,
kuris įterpia elementus į pradžią
metodas append,
kuris įterpia elementus į pabaigą
metodas appendChild,
kuris įterpia elementus į tėvinio elemento pabaigą
metodas insertBefore,
kuris įterpia elementus prieš elementą