Metoda insertAdjacentHTML

Metoda insertAdjacentHTML lejon futjen e një vargu kodi HTML në çdo vend të faqes. Kodi futet në raport me elementin referues. Mund të bëhet futja përpara elementit referues (mënyra e futjes 'beforeBegin'), pas tij (mënyra e futjes 'afterEnd'), si dhe në fillim (mënyra e futjes 'afterBegin') ose në fund (mënyra e futjes 'beforeEnd') të elementit referues.

Sintaksa

javascriptelementi referues.insertAdjacentHTML(mënyra e futjes, kodi për t'u futur);

Shembull . Mënyra beforeBegin

Le të jetë elementi referues elementi #target. Le të fusim përpara tij një paragraf të ri:

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

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

Rezultati i ekzekutimit të kodit:

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

Shembull . Mënyra afterEnd

Tani le të fusim një paragraf të ri pas elementit referues:

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

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

Rezultati i ekzekutimit të kodit:

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

Shembull . Mënyra afterBegin

Le të fusim një paragraf të ri në fillim të elementit referues:

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

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

Rezultati i ekzekutimit të kodit:

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

Shembull . Mënyra beforeEnd

Le të fusim një paragraf të ri në fund të elementit referues:

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

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

Rezultati i ekzekutimit të kodit:

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

Shihni gjithashtu