insertAdjacentHTML metodu

insertAdjacentHTML metodu səhifənin istənilən yerinə HTML kod sətri əlavə etməyə imkan verir. Kod əsas elementə nisbətən əlavə olunur. Əsas elementdən əvvəl ('beforeBegin' əlavə üsulu), ondan sonra ('afterEnd' əlavə üsulu), həmçinin əsas elementin əvvəlinə ('afterBegin' əlavə üsulu) ya da sonuna ('beforeEnd' əlavə üsulu) əlavə etmək olar.

Sintaksis

javascriptəsas element.insertAdjacentHTML(əlavə üsulu, əlavə olunacaq kod);

Nümunə . beforeBegin üsulu

Tutaq ki, əsas element #target elementidir. Onun qarşısına yeni abzas əlavə edək:

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

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

Kodun icrasının nəticəsi:

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

Nümunə . afterEnd üsulu

İndi isə əsas elementdən sonra yeni abzas əlavə edək:

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

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

Kodun icrasının nəticəsi:

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

Nümunə . afterBegin üsulu

Əsas elementin əvvəlinə yeni abzas əlavə edək:

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

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

Kodun icrasının nəticəsi:

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

Nümunə . beforeEnd üsulu

Əsas elementin sonuna yeni abzas əlavə edək:

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

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

Kodun icrasının nəticəsi:

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

Həmçinin bax