element.appendChild() Append a child
Last updated: 2026-09-09
element.appendChild() Append a child
appendChild adds a node as the last child. If the node already exists it is moved.
| Category | DOM |
|---|---|
| ES version | DOM |
📝 Syntax
parent.appendChild(child);⚙️ Parameters
| child | The child node to append. |
|---|
Returns：The appended child node.
Mutates the original：Yes (in place)
▶ Example
Edit the code, press Run, and see the result in the output panel:
Output：
(li appended to list)💡 Tip appendChild moves existing nodes — it does not clone them.
ℹ️ info Use DocumentFragment for batch insertions to reduce reflows.
🌐 Browser support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| element.appendChild() | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported by all modern browsers | |||||
🏷️ Related Items
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
❓ FAQ
QDoes appendChild clone elements?
ANo — it moves existing nodes. Use cloneNode(true) to copy.
QappendChild vs append?
Aappend accepts multiple args and strings; appendChild one node only.
QHow to insert at the start?
AUse prepend() or insertBefore().
