HTML DOM Element appendChild() 方法

定义和用法

appendChild() 方法将节点（元素）作为最后一个子元素添加到元素。

另请参阅：

insertBefore() 方法

replaceChild() 方法

removeChild() 方法

remove() 方法

childNodes 属性

firstChild 属性

lastChild 属性

firstElementChild 属性

lastElementChild 属性

相关的文档方法：

createElement() 方法

createTextNode() 方法

实例

例子 1

在列表中添加项目：

const node = document.createElement("li");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);

添加之前：

  • Kahvi
  • Tea

添加之后：

  • Kahvi
  • Tea
  • Vesi

Kokeile itse

例子 2

从一个列表向另一个列表中移动列表项：

const node = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").appendChild(node);

Siirron ennen:

  • Kahvi
  • Tea

  • Vesi
  • Maito

Siirron jälkeen:

  • Kahvi
  • Tea
  • Maito

  • Vesi

Kokeile itse

Esimerkki 3

Luo tekstillinen kappale:

  • Luo kappaleelementti
  • Luo tekstisolmu
  • Lisää tekstisolmu kappaleeseen
  • Lisää kappale dokumenttiin

Luo <p> -elementti ja lisää se <div> -elementtiin:

const para = document.createElement("p");
const node = document.createTextNode("Tämä on kappale.");
para.appendChild(node);
document.getElementById("myDIV").appendChild(para);

Kokeile itse

Esimerkki 4

Luo <p> -elementti ja lisää se dokumentin sisältöön:

const para = document.createElement("P");
const node = document.createTextNode("Tämä on kappale.");
para.appendChild(node);
document.body.appendChild(para);

Kokeile itse

Syntaksi

element.appendChild(node)

tai

node.appendChild(node)

Parametrit

Parametrit Kuvaus
node Välttämätön. Lisättävä solmu.

Palautusarvo

Tyyppi Kuvaus
Solmu Lisätty solmu.

Selaimen tuki

element.appendChild() 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