Метод insertAdjacentHTML

Метод insertAdjacentHTML HTML код сатрини саҳифанинг istalgan joyiga киритиш имконини беради. Код асосiy элементга нисбатан киритилади. Асосiy элемент олдига киритиш амалга оширилиши мумкин (киритиш усули 'beforeBegin'), ундан кейин (киритиш усули 'afterEnd'), шунгингдек, асосiy элементнинг бошланғичига (киритиш усули 'afterBegin') ёки охирига (киритиш усули 'beforeEnd') киритиш мумкин.

Синтаксис

javascriptасосiy элемент.insertAdjacentHTML(киритиш усули, киритиладиган код);

Мисол . BeforeBegin усули

Асосiy элемент #target элемент булсин. Унинг олдига янги абзацни киритамиз:

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

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

Коднинг ижроси натижаси:

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

Мисол . AfterEnd усули

Энди асосiy элементдан кейин янги абзацни киритамиз:

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

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

Коднинг ижроси натижаси:

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

Мисол . AfterBegin усули

Асосiy элементнинг бошланғичига янги абзацни киритамиз:

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

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

Коднинг ижроси натижаси:

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

Мисол . BeforeEnd усули

Асосiy элементнинг охирига янги абзацни киритамиз:

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

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

Коднинг ижроси натижаси:

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

Қарашлар