Metoden insertAdjacentHTML

Metoden insertAdjacentHTML låter dig infoga en sträng med HTML-kod var som helst på sidan. Koden infogas i förhållande till ett referenselement. Du kan infoga före referenselementet (infogningssätt 'beforeBegin'), efter det (infogningssätt 'afterEnd'), samt i början (infogningssätt 'afterBegin') eller i slutet (infogningssätt 'beforeEnd') av referenselementet.

Syntax

javascriptreferenselement.insertAdjacentHTML(infogningssätt, kod att infoga);

Exempel . Sättet beforeBegin

Låt referenselementet vara elementet #target. Låt oss infoga ett nytt stycke före det:

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

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

Resultat av exekveringen av koden:

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

Exempel . Sättet afterEnd

Låt oss nu infoga ett nytt stycke efter referenselementet:

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

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

Resultat av exekveringen av koden:

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

Exempel . Sättet afterBegin

Låt oss infoga ett nytt stycke i början av referenselementet:

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

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

Resultat av exekveringen av koden:

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

Exempel . Sättet beforeEnd

Låt oss infoga ett nytt stycke i slutet av referenselementet:

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

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

Resultat av exekveringen av koden:

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

Se även