Metoden insertAdjacentHTML

Metoden insertAdjacentHTML tillater innsetting av en streng med HTML-kode hvor som helst på siden. Koden settes inn i forhold til et referanseelement. Man kan sette inn før referanseelementet (innsettingsmåte 'beforeBegin'), etter det (innsettingsmåte 'afterEnd'), samt i begynnelsen (innsettingsmåte 'afterBegin') eller på slutten (innsettingsmåte 'beforeEnd') av referanseelementet.

Syntaks

javascriptreferanseelement.insertAdjacentHTML(innsettingsmåte, kode for innsetting);

Eksempel . Måten beforeBegin

La referanseelementet være elementet #target. La oss sette inn et nytt avsnitt før det:

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

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

Resultat av kjøring av kode:

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

Eksempel . Måten afterEnd

La oss nå sette inn et nytt avsnitt etter referanseelementet:

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

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

Resultat av kjøring av kode:

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

Eksempel . Måten afterBegin

La oss sette inn et nytt avsnitt i begynnelsen av referanseelementet:

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

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

Resultat av kjøring av kode:

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

Eksempel . Måten beforeEnd

La oss sette inn et nytt avsnitt på slutten av referanseelementet:

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

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

Resultat av kjøring av kode:

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

Se også