Latest web development tutorials

HTML DOM appendChild () method

Elements Object Reference Element object

Examples

Add a list item:

document.getElementById("myList").appendChild( newListItem );

Before adding:

  • Coffee
  • Tea

After you add:

  • Coffee
  • Tea
  • Water

try it"

Definition and Usage

appendChild () method to add a new child node to the end node of the list of child nodes.

Tip: If the document tree has been in existence newchild, it is removed from the document tree, and then reinsert it in the new location. If newchild is DocumentFragment node, then it will not be inserted directly, but to its child nodes sequentially inserted into the end of the current node's childNodes array [].

You can use the appendChild () method to remove the element to another element.

Examples

Transfer to a list item to another list item:

var node=document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);

Before adding:

  • Coffee
  • Tea
  • Water
  • Milk

After you add:

  • Coffee
  • Tea
  • Milk
  • Water

try it"

Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

All major browsers support appendChild () method


grammar

node .appendChild( node )

parameter

参数 类型 描述
node 节点对象 必须。你要添加的节点对象。

return value

类型 描述
节点对象 添加的节点

technical details

DOM version Core Level 1 Node Object


Elements Object Reference Element object