HTML DOM appendChild()Method
Element ObjectExample
Add list item:
document.getElementById("myList").appendChild(newListItem);
Before adding:
- Coffee
- Tea
After adding:
- Coffee
- Tea
- Water
Try it yourself »
Definition and Usage
The appendChild() method adds a new child node to the end of a node's list of child nodes.
Tip:If newchild already exists in the document tree, it will be removed from the document tree and then reinserted at its new position. If newchild is a DocumentFragment node, it will not be inserted directly; instead, its child nodes will be inserted in order at the end of the current node's childNodes[] array.
You can use the appendChild() method to move an element to another element.
Example
Move a list item to another list:
var node=document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);
document.getElementById("myList1").appendChild(node);
Before adding:
- Coffee
- Tea
- Water
- Milk
After adding:
- Coffee
- Tea
- Milk
- Water
Try it yourself »
Browser Support
All major browsers support the appendChild() method
Syntax
node.appendChild(node)
Parameters
| Parameter | Type | Description |
|---|---|---|
| node | Node object | Required. The node object you want to add. |
Return Value
| Type | Description |
|---|---|
| Node object | The added node |
Technical Details
| DOM Version | Core Level 1 Node Object |
|---|
Other Extensions