insertAdjacentHTML metodi

insertAdjacentHTML metodi sahifaning istalgan joyiga HTML kod qatorini qo'shish imkonini beradi. Kod asosiy elementga nisbatan qo'shiladi. Asosiy element oldidan (qo'shish usuli 'beforeBegin'), undan keyin (qo'shish usuli 'afterEnd'), shuningdek, asosiy element boshiga (qo'shish usuli 'afterBegin') yoki oxiriga (qo'shish usuli 'beforeEnd') qo'shish mumkin.

Sintaksis

javascriptasosiy element.insertAdjacentHTML(qo'shish usuli, qo'shiladigan kod);

Misol . beforeBegin usuli

Faraz qilaylik, asosiy element - bu #target elementi. Uning oldiga yangi abzas qo'shamiz:

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

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

Kod bajarish natijasi:

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

Misol . afterEnd usuli

Endi esa yangi abzasni asosiy elementdan keyin qo'shamiz:

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

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

Kod bajarish natijasi:

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

Misol . afterBegin usuli

Yangi abzasni asosiy element boshiga qo'shamiz:

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

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

Kod bajarish natijasi:

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

Misol . beforeEnd usuli

Yangi abzasni asosiy element oxiriga qo'shamiz:

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

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

Kod bajarish natijasi:

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

Shuningdek qarang