Metoda insertAdjacentElement
Metoda insertAdjacentElement permite
inserarea unui element în orice loc pe pagină.
Este folosită cel mai frecvent după crearea elementului
cu createElement.
Codul este inserat în raport cu elementul
de referință. Puteți face inserarea înainte
de elementul de referință (mod de inserare beforeBegin),
după acesta (mod de inserare afterEnd),
de asemenea la început (mod de inserare afterBegin)
sau la sfârșit (mod de inserare beforeEnd)
elementului de referință.
Sintaxă
elementul de referință.insertAdjacentElement(mod de inserare, cod de inserat);
Exemplu . Modul beforeBegin
Să presupunem că elementul de referință este elementul #target.
Să inserăm înaintea lui un nou paragraf:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
Rezultatul executării codului:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Exemplu . Modul afterEnd
Acum să inserăm un nou paragraf după elementul de referință:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
Rezultatul executării codului:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
Exemplu . Modul afterBegin
Să inserăm un nou paragraf la începutul elementului de referință:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
Rezultatul executării codului:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Exemplu . Modul beforeEnd
Să inserăm un nou paragraf la sfârșitul elementului de referință:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Rezultatul executării codului:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Vedeți și
-
metoda
insertAdjacentHTML,
care inserează tag-uri în locul specificat -
metoda
insertAdjacentText,
care inserează text în locul specificat -
metoda
prepend,
care inserează elemente la început -
metoda
append,
care inserează elemente la sfârșit -
metoda
appendChild,
care inserează elemente la sfârșitul părintelui -
metoda
insertBefore,
care inserează elemente înaintea unui element
