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

javascriptverwysingselement.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:

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

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

Resultaat van die uitvoering van die kode:

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

Voorbeeld . Metode afterEnd

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

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

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

Resultaat van die uitvoering van die kode:

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

Voorbeeld . Metode afterBegin

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

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

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

Resultaat van die uitvoering van die kode:

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

Voorbeeld . Metode beforeEnd

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

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

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

Resultaat van die uitvoering van die kode:

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

Sien ook