insertAdjacentHTML-metodi

insertAdjacentHTML-metodi mahdollistaa HTML-koodimerkkijonon lisäämisen mihin tahansa kohtaan sivulla. Koodi lisätään suhteessa viiteelementtiin. Lisäyksen voi tehdä ennen viiteelementtiä (lisätapa 'beforeBegin'), sen jälkeen (lisätapa 'afterEnd'), tai myös alkuun (lisätapa 'afterBegin') tai loppuun (lisätapa 'beforeEnd') viiteelementtiä.

Syntaksi

viiteelementti.insertAdjacentHTML(lisätapa, lisättävä koodi);

Esimerkki . Tapa beforeBegin

Olkoon viiteelementti elementti #target. Lisätään ennen sitä uusi kappale:

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

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

Koodin suorituksen tulos:

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

Esimerkki . Tapa afterEnd

Lisätään nyt uusi kappale viiteelementin jälkeen:

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

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

Koodin suorituksen tulos:

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

Esimerkki . Tapa afterBegin

Lisätään uusi kappale viiteelementin alkuun:

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

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

Koodin suorituksen tulos:

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

Esimerkki . Tapa beforeEnd

Lisätään uusi kappale viiteelementin loppuun:

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

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

Koodin suorituksen tulos:

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

Katso myös

metodi insertAdjacentText,
joka lisää tekstin määrättyyn paikkaan
metodi insertAdjacentElement,
joka lisää elementin määrättyyn paikkaan
metodi prepend,
joka lisää elementit alkuun
metodi append,
joka lisää elementit loppuun
metodi appendChild,
joka lisää elementit vanhemman loppuun
metodi insertBefore,
joka lisää elementit ennen elementtiä