Append an item in a list:
Before appending:
After appending:
More "Try it Yourself" examples below.
The appendChild() method appends a node as the last child of a node.
Tip: If you want create a new paragraph, with text, remember to create the text as a Text node which you append to the paragraph, then append the paragraph to the document.
You can also use this method to move an element from one element to another (See "More Examples").
Tip: Use the insertBefore() method to insert a new child node before a specified, existing, child node.
The numbers in the table specify the first browser version that fully supports the method.
Method | |||||
---|---|---|---|---|---|
appendChild() | 1.0 | Yes | 1.0 | Yes | Yes |
Parameter | Type | Description |
---|---|---|
node | Node object | Required. The node object you want to append |
Return Value: | A Node Object, representing the appended node |
---|---|
DOM Version | Core Level 1 Node Object |
Move a list item from one list to another:
Before appending:
After appending:
Create a <p> element and append it to a <div> element:
Create a <p> element with some text and append it to the end of the document body:
HTML DOM reference: element.hasChildNodes() Method
HTML DOM reference: element.insertBefore() Method
HTML DOM reference: element.removeChild() Method
HTML DOM reference: element.replaceChild() Method
HTML DOM reference: document.createElement() Method
HTML DOM reference: document.createTextNode() Method
HTML DOM reference: document.adoptNode() Method
HTML DOM reference: document.importNode() Method