Meetod insertAdjacentHTML

Meetod insertAdjacentHTML võimaldab sisestada HTML-koodi stringi lehe suvalisse kohta. Kood sisestatakse suhtes tugielemendiga. Saab teha sisestuse enne tugielementi (sisestusviis 'beforeBegin'), pärast seda (sisestusviis 'afterEnd'), samuti algusesse (sisestusviis 'afterBegin') või lõppu (sisestusviis 'beforeEnd') tugielemendist.

Süntaks

javascripttugielement.insertAdjacentHTML(sisestusviis, sisestatav kood);

Näide . Viis beforeBegin

Olgu tugielemendiks element #target. Sisestame selle ette uue lõigu:

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

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

Koodi täitmise tulemus:

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

Näide . Viis afterEnd

Nüüd sisestame uue lõigu pärast tugielementi:

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

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

Koodi täitmise tulemus:

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

Näide . Viis afterBegin

Sisestame uue lõigu tugielemendi algusesse:

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

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

Koodi täitmise tulemus:

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

Näide . Viis beforeEnd

Sisestame uue lõigu tugielemendi lõppu:

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

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

Koodi täitmise tulemus:

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

Vaata ka