Metoda insertAdjacentElement
Metoda insertAdjacentElement lejon
futjen e një elementi në çdo vend të faqes.
Përdoret më shpesh pas krijimit të një elementi
me createElement.
Kodi futet në raport me elementin
referues. Mund të bëhet futja përpara
elementit referues (mënyra e futjes beforeBegin),
pas tij (mënyra e futjes afterEnd),
si dhe në fillim (mënyra e futjes afterBegin)
ose në fund (mënyra e futjes beforeEnd)
të elementit referues.
Sintaksa
elementi referues.insertAdjacentElement(mënyra e futjes, kodi për të futur);
Shembull . Mënyra beforeBegin
Le të jetë elementi referues elementi #target.
Le të fusim një paragraf të ri përpara tij:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
Rezultati i ekzekutimit të kodit:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Shembull . Mënyra afterEnd
Tani le të fusim një paragraf të ri pas elementit referues:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
Rezultati i ekzekutimit të kodit:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
Shembull . Mënyra afterBegin
Le të fusim një paragraf të ri në fillim të elementit referues:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
Rezultati i ekzekutimit të kodit:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Shembull . Mënyra beforeEnd
Le të fusim një paragraf të ri në fund të elementit referues:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Rezultati i ekzekutimit të kodit:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Shihni gjithashtu
-
metoda
insertAdjacentHTML,
që fut etiketa në një vend të caktuar -
metoda
insertAdjacentText,
që fut tekst në një vend të caktuar -
metoda
prepend,
që fut elemente në fillim -
metoda
append,
që fut elemente në fund -
metoda
appendChild,
që fut elemente në fund të prindit -
metoda
insertBefore,
që fut elemente përpara një elementi
