Metode insertAdjacentHTML

Metode insertAdjacentHTML ļauj ievietot HTML koda virkni jebkurā lapas vietā. Kods tiek ievietots attiecībā pret atsauces elementu. Var veikt ievietošanu pirms atsauces elementa (ievietošanas veids 'beforeBegin'), pēc tā (ievietošanas veids 'afterEnd'), kā arī ievietošanu iesākumā (ievietošanas veids 'afterBegin') vai beigās (ievietošanas veids 'beforeEnd') atsauces elementa.

Sintakse

javascriptatsauces elements.insertAdjacentHTML(ievietošanas veids, kods ievietošanai);

Piemērs . Veids beforeBegin

Lai atsauces elements ir elements #target. Ievietosim pirms tā jaunu rindkopu:

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

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

Koda izpildes rezultāts:

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

Piemērs . Veids afterEnd

Un tagad ievietosim jaunu rindkopu pēc atsauces elementa:

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

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

Koda izpildes rezultāts:

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

Piemērs . Veids afterBegin

Ievietosim jaunu rindkopu atsauces elementa iesākumā:

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

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

Koda izpildes rezultāts:

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

Piemērs . Veids beforeEnd

Ievietosim jaunu rindkopu atsauces elementa beigās:

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

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

Koda izpildes rezultāts:

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

Skatiet arī