insertAdjacentHTML metodu

insertAdjacentHTML metody sahypanyň islendik ýerine HTML kody setirini goýmaga mümkinçilik berýär. Kod degişli elemente garaşly goýulýar. Degişli elementden öň (goýuş usuly 'beforeBegin'), ondan soň (goýuş usuly 'afterEnd'), şeýle hem degişli elementiň başyna (goýuş usuly 'afterBegin') ýa-da ahyryna (goýuş usuly 'beforeEnd') goýmak bolýar.

Sintaksis

javascriptdegishli element.insertAdjacentHTML(goýuş usuly, goýmak üçin kod);

Mysal . BeforeBegin usuly

Degişli element #target elementi bolsun. Oňa bir täze abzas goýalyň:

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

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

Kody ýerine ýetiriş netijesi:

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

Mysal . AfterEnd usuly

Indi bir täze abzasy degişli elementden soň goýalyň:

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

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

Kody ýerine ýetiriş netijesi:

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

Mysal . AfterBegin usuly

Bir täze abzasy degişli elementüň başyna goýalyň:

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

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

Kody ýerine ýetiriş netijesi:

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

Mysal . BeforeEnd usuly

Bir täze abzasy degişli elementüň ahyryna goýalyň:

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

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

Kody ýerine ýetiriş netijesi:

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

Şeýle hem serediň