Node: appendChild() method
The appendChild()
method of the Node
interface adds a node to the end of the list of children of a specified parent node.
Note: If the given child is a reference to an existing node in the document, appendChild()
moves it from its current position to the new position.
If the given child is a DocumentFragment
, the entire contents of the DocumentFragment
are moved into the child list of the specified parent node.
appendChild()
returns the newly appended node, or if the child is a DocumentFragment
, the emptied fragment.
Note: Unlike this method, the Element.append()
method supports multiple arguments and appending strings. You can prefer using it if your node is an element.
Syntax
js
appendChild(aChild)
Parameters
aChild
-
The node to append to the given parent node (commonly an element).
Return value
A Node
that is the appended child (aChild
), except when aChild
is a DocumentFragment
, in which case the empty DocumentFragment
is returned.
Exceptions
HierarchyRequestError
DOMException
-
Thrown when the constraints of the DOM tree are violated, that is if one of the following cases occurs:
- If the parent of
aChild
is not aDocument
,DocumentFragment
, or anElement
. - If the insertion of
aChild
would lead to a cycle, that is ifaChild
is an ancestor of the node. - If
aChild
is not aDocumentFragment
, aDocumentType
, anElement
, or aCharacterData
. - If the current node is a
Text
, and its parent is aDocument
. - If the current node is a
DocumentType
and its parent is not aDocument
, as a doctype should always be a direct descendant of a document. - If the parent of the node is a
Document
andaChild
is aDocumentFragment
with more than oneElement
child, or that has aText
child. - If the insertion of
aChild
would lead toDocument
with more than oneElement
as child.
- If the parent of
Description
If the given child is a reference to an existing node in the document, appendChild()
moves it from its current position to the new position — there is no requirement to remove the node from its parent
node before appending it to some other node. This means that a node can't be in two points of the document simultaneously. The Node.cloneNode()
method can be used to make a copy of the node before appending it under the new parent. Copies made with cloneNode
are not automatically kept in sync.
appendChild()
returns the newly appended node, instead of the parent node. This means you can append the new node as soon as it's created without losing reference to it:
js
const paragraph = document.body.appendChild(document.createElement("p"));
// You can append more elements to the paragraph later
On the other hand, you cannot use appendChild()
in a fluent API fashion (like JQuery).
js
// This doesn't append three paragraphs:
// the three elements will be nested instead of siblings
document.body
.appendChild(document.createElement("p"))
.appendChild(document.createElement("p"))
.appendChild(document.createElement("p"));
Example
Append a paragraph to the body
js
// Create a new paragraph element, and append it to the end of the document body
const p = document.createElement("p");
document.body.appendChild(p);
Creating a nested DOM structure
In this example, we attempt to create a nested DOM structure using as few temporary variables as possible.
js
const fragment = document.createDocumentFragment();
const li = fragment
.appendChild(document.createElement("section"))
.appendChild(document.createElement("ul"))
.appendChild(document.createElement("li"));
li.textContent = "hello world";
document.body.appendChild(fragment);
It generates the following DOM tree:
html
<section>
<ul>
<li>hello world</li>
</ul>
</section>
Specifications
Specification |
---|
DOM Standard # dom-node-appendchild |
Browser compatibility
BCD tables only load in the browser