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

degishli 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ň:

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

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

Kody ýerine ýetiriş netijesi:

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

Mysal . AfterEnd usuly

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

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

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

Kody ýerine ýetiriş netijesi:

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

Mysal . AfterBegin usuly

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

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

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

Kody ýerine ýetiriş netijesi:

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

Mysal . BeforeEnd usuly

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

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

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

Kody ýerine ýetiriş netijesi:

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

Şeýle hem serediň

insertAdjacentText metodu,
belgilenen ýere tekst goýýar
insertAdjacentElement metodu,
belgilenen ýere element goýýar
prepend metodu,
elementleri başyna goýýar
append metodu,
elementleri ahyryna goýýar
appendChild metodu,
elementleri ataňyň ahyryna goýýar
insertBefore metodu,
elementleri elementden öň goýýar