HTML DOM Element insertBefore() -metodi

Määritelmä ja käyttö

insertBefore() Metodi lisää lapsielementin olemassa olevan lapsielementin eteen.

Katso myös:

appendChild() -metodi

replaceChild() -metodi

removeChild() -metodi

remove() -metodi

childNodes -ominaisuus

firstChild -ominaisuus

lastChild -ominaisuus

firstElementChild -ominaisuus

lastElementChild -ominaisuus

Esimerkki

Esimerkki 1

  1. Luo <li> -elementti
  2. Luo tekstipiste
  3. Lisää teksti <li> -elementtiin
  4. Lisää <li> -elementti ennen ensimmäistä lapsielementtiä <ul>-elementissä:
const newNode = document.createElement("li");
const textNode = document.createTextNode("Vesi");
newNode.appendChild(textNode);
const list = document.getElementById("myList");
list.insertBefore(newNode, list.children[0]);

Kokeile itse

Esimerkki 2

Siirrä viimeinen elementti yhdestä luettelosta toiseen luetteloon alkuun:

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, list.children[0]);

Kokeile itse

Esimerkki 3

Siirrä viimeinen elementti yhdestä luettelosta toiseen luetteloon loppuun:

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, null);

Kokeile itse

Syntaksi

element.insertBefore(newnode, existingnode)

tai

node.insertBefore(newnode, existingnode)

Parametrit

Parametrit Kuvaus
newnode Välttämätön. Lisättävä solmu (elementti).
existingnode

Valinnainen. Lisää uusi solmu olemassa olevan solmun eteen.

Jos ei määritetty, insertBefore-metodi lisää newnode loppuun.

Palautusarvo

Tyyppi Kuvaus
Solmu Lisätty solmu.

Selaimen tuki

element.insertBefore() Se on DOM Level 1 (1998) ominaisuus.

Kaikki selaimet tukevat sitä täysin:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Tuki 9-11 Tuki Tuki Tuki Tuki