JavaScript appendChild
last modified April 2, 2025
In this article, we explore the appendChild method in JavaScript.
This method is essential for DOM manipulation, allowing developers to add new
elements to the document structure dynamically.
Basic Definition
The appendChild method adds a node to the end of the list of
children of a specified parent node. If the node already exists in the document,
it will be moved to the new position.
This method is commonly used to dynamically create and add elements to the DOM. It returns the appended child node, which can be useful for chaining operations.
Basic appendChild Example
This example demonstrates how to create a new element and append it to the body.
<!DOCTYPE html>
<html>
<head>
<title>Basic appendChild</title>
</head>
<body>
<div id="container"></div>
<script>
const container = document.getElementById('container');
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph!';
container.appendChild(newParagraph);
</script>
</body>
</html>
In this basic example, we first get a reference to the container div. Then we create a new paragraph element and set its text content. Finally, we append the new paragraph to the container.
This demonstrates the fundamental usage of appendChild to add new
elements to the DOM. The method adds the new element as the last child of the
parent element.
Appending Multiple Elements
This example shows how to append multiple elements to a parent node.
<!DOCTYPE html>
<html>
<head>
<title>Multiple Elements</title>
</head>
<body>
<ul id="shopping-list"></ul>
<script>
const list = document.getElementById('shopping-list');
const items = ['Apples', 'Bananas', 'Milk', 'Bread'];
items.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
list.appendChild(li);
});
</script>
</body>
</html>
Here we create a shopping list by dynamically adding list items to an unordered
list. We use forEach to iterate through the array of items.
For each item, we create a new li element, set its text content,
and append it to the list. This pattern is common when rendering dynamic lists.
Moving Existing Elements
This example demonstrates how appendChild can move existing elements.
<!DOCTYPE html>
<html>
<head>
<title>Moving Elements</title>
</head>
<body>
<div id="source">
<p id="movable">This element will be moved</p>
</div>
<div id="destination"></div>
<button onclick="moveElement()">Move Element</button>
<script>
function moveElement() {
const movable = document.getElementById('movable');
const destination = document.getElementById('destination');
destination.appendChild(movable);
}
</script>
</body>
</html>
In this example, we have a paragraph inside a source div. When the button is
clicked, the paragraph is moved to the destination div using
appendChild.
This shows that appendChild doesn't just add new elements - it can
also reposition existing elements within the DOM. The original element is removed
from its current position before being appended to the new parent.
Appending Complex Structures
This example shows how to build and append more complex DOM structures.
<!DOCTYPE html>
<html>
<head>
<title>Complex Structures</title>
</head>
<body>
<div id="app"></div>
<script>
const app = document.getElementById('app');
const card = document.createElement('div');
card.className = 'card';
const title = document.createElement('h2');
title.textContent = 'Product Card';
const description = document.createElement('p');
description.textContent = 'This is a product description.';
const button = document.createElement('button');
button.textContent = 'Add to Cart';
card.appendChild(title);
card.appendChild(description);
card.appendChild(button);
app.appendChild(card);
</script>
</body>
</html>
Here we create a product card component with multiple nested elements. We first create the card container, then its child elements, and finally assemble them.
This demonstrates how appendChild can be used to build complex UI
components programmatically. Each element is created and configured before being
appended to its parent.
Appending Document Fragments
This example demonstrates using DocumentFragment with appendChild for better performance.
<!DOCTYPE html>
<html>
<head>
<title>Document Fragments</title>
</head>
<body>
<div id="calendar"></div>
<script>
const calendar = document.getElementById('calendar');
const fragment = document.createDocumentFragment();
for (let i = 1; i <= 7; i++) {
const day = document.createElement('div');
day.className = 'day';
day.textContent = `Day ${i}`;
fragment.appendChild(day);
}
calendar.appendChild(fragment);
</script>
</body>
</html>
In this example, we create a week calendar by first building the structure in a DocumentFragment. The fragment acts as a lightweight container for DOM nodes.
Using DocumentFragment is more efficient when appending multiple elements, as it minimizes reflows and repaints. All elements are added to the DOM in a single operation when the fragment is appended.
Source
In this article, we have shown how to use appendChild in JavaScript.
This method is fundamental for dynamic DOM manipulation and element creation in
web development.
Author
List all JS DOM tutorials.