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);

添加之前：

  • Kaffe
  • Te

添加之后：

  • Kaffe
  • Te
  • Vatten

Prova själv

例子 2

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

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

Innan flyttning:

  • Kaffe
  • Te

  • Vatten
  • Mjölk

Efter flyttning:

  • Kaffe
  • Te
  • Mjölk

  • Vatten

Prova själv

Exempel 3

Skapa ett avsnitt med text:

  • Skapa en avsnittslement
  • Skapa en textnod
  • Lägg till en textnod till avsnittet
  • Lägg till en avsnitt till dokumentet

Skapa ett <p> element och lägg till det i <div> elementet:

const para = document.createElement("p");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.getElementById("myDIV").appendChild(para);

Prova själv

Exempel 4

Skapa en <p> element och lägg till det i dokumentets innehåll:

const para = document.createElement("P");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.body.appendChild(para);

Prova själv

Syntax

element.appendChild(node)

eller

node.appendChild(node)

Parameter

Parameter Beskrivning
node Obligatorisk. Noden att lägga till.

Returvärde

Typ Beskrivning
Nod Lägg till noden.

Webbläsarstöd

element.appendChild() är en DOM Level 1 (1998) egenskap.

Alla webbläsare stöder det fullt ut:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Stöd 9-11 Stöd Stöd Stöd Stöd