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ė
atskaitos elementas.insertAdjacentElement(įterpimo būdas, kodas įterpimui);
Pavyzdys . Būdas beforeBegin
Tegu atskaitos elementas yra elementas #target.
Įterpkime prieš jį naują pastraipą:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
Kodo vykdymo rezultatas:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Pavyzdys . Būdas afterEnd
O dabar įterpkime naują pastraipą po atskaitos elemento:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
Kodo vykdymo rezultatas:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
Pavyzdys . Būdas afterBegin
Įterpkime naują pastraipą į atskaitos elemento pradžią:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
Kodo vykdymo rezultatas:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Pavyzdys . Būdas beforeEnd
Įterpkime naują pastraipą į atskaitos elemento pabaigą:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Kodo vykdymo rezultatas:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Taip pat žiūrėkite
-
metodas
insertAdjacentHTML,
kuris įterpia žymes į nurodytą vietą -
metodas
insertAdjacentText,
kuris įterpia tekstą į nurodytą vietą -
metodas
prepend,
kuris įterpia elementus į pradžią -
metodas
append,
kuris įterpia elementus į pabaigą -
metodas
appendChild,
kuris įterpia elementus į tėvinio elemento pabaigą -
metodas
insertBefore,
kuris įterpia elementus prieš elementą
