Metodas insertAdjacentElement

Metodas insertAdjacentElement leidžia įterpti elementą bet kurioje puslapio vietoje. Dažniausiai naudojamas sukūrus elementą naudojant createElement. Kodas įterpiamas, atsižvelgiant į atskaitos elementą. Galima atlikti įterpimą prieš atskaitos elementą (įterpimo būdas beforeBegin), po jo (įterpimo būdas afterEnd), taip pat į pradžią (įterpimo būdas afterBegin) arba į pabaigą (įterpimo būdas beforeEnd) atskaitos elemento.

Sintaksė

javascriptatskaitos elementas.insertAdjacentElement(įterpimo būdas, kodas įterpimui);

Pavyzdys . Būdas beforeBegin

Tegu atskaitos elementas yra elementas #target. Įterpkime prieš jį naują pastraipą:

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

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

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

Kodo vykdymo rezultatas:

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

Pavyzdys . Būdas afterEnd

O dabar įterpkime naują pastraipą po atskaitos elemento:

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

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

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

Kodo vykdymo rezultatas:

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

Pavyzdys . Būdas afterBegin

Įterpkime naują pastraipą į atskaitos elemento pradžią:

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

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

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

Kodo vykdymo rezultatas:

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

Pavyzdys . Būdas beforeEnd

Įterpkime naują pastraipą į atskaitos elemento pabaigą:

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

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

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

Kodo vykdymo rezultatas:

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

Taip pat žiūrėkite