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

javascriptviiteelementti.insertAdjacentElement(lisäystapa, lisättävä koodi);

Esimerkki . Tapa beforeBegin

Olkoon viiteelementti elementti #target. Lisätään sen eteen uusi kappale:

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

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

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

Koodin suorituksen tulos:

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

Esimerkki . Tapa afterEnd

Lisätään nyt uusi kappale viiteelementin jälkeen:

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

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

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

Koodin suorituksen tulos:

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

Esimerkki . Tapa afterBegin

Lisätään uusi kappale viiteelementin alkuun:

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

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

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

Koodin suorituksen tulos:

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

Esimerkki . Tapa beforeEnd

Lisätään uusi kappale viiteelementin loppuun:

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

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

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

Koodin suorituksen tulos:

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

Katso myös