insertAdjacentElement Metody

insertAdjacentElement metody sahypanyň islendik ýerine element goýup bermäge mümkinçilik berýär. Köp halatlarda createElement kömegi bilen döredilen elementden soň ulanylýar. Kod esasy elemente garanyňda goýulýar. Esasy elementden öň (goýuş usuly beforeBegin), ondan soň (goýuş usuly afterEnd), şeýle hem esasy elementüň başynda (goýuş usuly afterBegin) ýa-da soňunda (goýuş usuly beforeEnd) goýup bolýar.

Sintaksis

javascriptesasy element.insertAdjacentElement(goýuş usuly, goýuljak kod);

Mysal . beforeBegin Usuly

Esasy elementiň #target element bolsun diýeliň. Ondan öň täze abzas goýalyň:

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

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);

Kodyň netijesi:

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

Mysal . afterEnd Usuly

Indi bolsa esasy elementden soň täze abzas goýalyň:

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

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);

Kodyň netijesi:

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

Mysal . afterBegin Usuly

Esasy elementüň başyna täze abzas goýalyň:

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

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);

Kodyň netijesi:

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

Mysal . beforeEnd Usuly

Esasy elementüň soňuna täze abzas goýalyň:

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

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);

Kodyň netijesi:

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

Şeýle-de görüň