insertAdjacentElement-metodi
insertAdjacentElement-metodi mahdollistaa
elementin lisäämisen mihin tahansa sivun kohtaan.
Sitä käytetään useimmiten elementin luomisen jälkeen
createElement-metodilla.
Koodi lisätään suhteessa viiteelementtiin.
Lisäys voidaan tehdä viiteelementin eteen
(lisäystapa beforeBegin),
sen jälkeen (lisäystapa afterEnd),
tai viiteelementin alkuun (lisäystapa afterBegin)
tai loppuun (lisäystapa beforeEnd).
Syntaksi
viiteelementti.insertAdjacentElement(lisäystapa, lisättävä koodi);
Esimerkki . Tapa beforeBegin
Olkoon viiteelementti elementti #target.
Lisätään sen eteen uusi kappale:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
Koodin suorituksen tulos:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Esimerkki . Tapa afterEnd
Lisätään nyt uusi kappale viiteelementin jälkeen:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
Koodin suorituksen tulos:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
Esimerkki . Tapa afterBegin
Lisätään uusi kappale viiteelementin alkuun:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
Koodin suorituksen tulos:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Esimerkki . Tapa beforeEnd
Lisätään uusi kappale viiteelementin loppuun:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Koodin suorituksen tulos:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Katso myös
-
metodi
insertAdjacentHTML,
joka lisää tunnisteet haluttuun paikkaan -
metodi
insertAdjacentText,
joka lisää tekstin haluttuun paikkaan -
metodi
prepend,
joka lisää elementit alkuun -
metodi
append,
joka lisää elementit loppuun -
metodi
appendChild,
joka lisää elementit vanhemman loppuun -
metodi
insertBefore,
joka lisää elementit elementin eteen
