JavaScript append() Method
last modified April 2, 2025
In this article, we explore the element.append() method in
JavaScript. This method is essential for DOM manipulation, allowing developers
to add nodes or strings to the end of a parent element's children.
Basic Definition
The append() method inserts a set of Node objects or strings after
the last child of the parent element. Unlike appendChild(), it can
accept multiple arguments and string values.
The method modifies the DOM directly and returns undefined. It's supported in all modern browsers but not in Internet Explorer. Strings are inserted as Text nodes automatically.
Basic append() Usage
This example demonstrates how to append a simple element to a container.
<!DOCTYPE html>
<html>
<head>
<title>Basic append()</title>
</head>
<body>
<div id="container"></div>
<script>
const container = document.getElementById('container');
const newDiv = document.createElement('div');
newDiv.textContent = 'Appended element';
container.append(newDiv);
</script>
</body>
</html>
In this basic example, we create a div element and append it to the container.
The append() method adds the new div as the last child of the
container.
This demonstrates the fundamental usage of append() to add elements
to the DOM. The method is cleaner than appendChild() for simple
cases and works similarly for element nodes.
Appending Multiple Elements
This example shows how to append multiple elements at once using append().
<!DOCTYPE html>
<html>
<head>
<title>Multiple Elements</title>
</head>
<body>
<ul id="list"></ul>
<script>
const list = document.getElementById('list');
const item1 = document.createElement('li');
const item2 = document.createElement('li');
item1.textContent = 'First item';
item2.textContent = 'Second item';
list.append(item1, item2);
</script>
</body>
</html>
Here we create two list items and append them to an unordered list in a single
operation. The append() method accepts multiple arguments.
This demonstrates the advantage of append() over
appendChild() when adding multiple elements. It reduces the number
of DOM operations needed.
Appending Strings and Elements
This example demonstrates how append() can handle both strings and elements.
<!DOCTYPE html>
<html>
<head>
<title>Mixed Content</title>
</head>
<body>
<div id="content"></div>
<script>
const content = document.getElementById('content');
const span = document.createElement('span');
span.textContent = 'span element';
content.append('Text before ', span, ' and text after');
</script>
</body>
</html>
In this example, we append a mix of string text and an element node to a div. The strings are automatically converted to text nodes.
This shows the flexibility of append() in handling different types
of content. The method maintains the order of arguments in the resulting DOM.
Appending with Template Literals
This example shows how to use append() with template literals for dynamic content.
<!DOCTYPE html>
<html>
<head>
<title>Template Literals</title>
</head>
<body>
<div id="output"></div>
<button onclick="addMessage()">Add Message</button>
<script>
function addMessage() {
const output = document.getElementById('output');
const username = 'John';
const count = 3;
output.append(`Hello ${username}! You have ${count} new messages.`);
}
</script>
</body>
</html>
Here we use a template literal with variables to create dynamic content that gets appended when the button is clicked. The string is automatically converted.
This demonstrates how append() can work with dynamic content
generation. Template literals provide a clean way to create complex strings.
Appending to Document Fragments
This example demonstrates using append() with document fragments for performance.
<!DOCTYPE html>
<html>
<head>
<title>Document Fragment</title>
</head>
<body>
<div id="results"></div>
<script>
const fragment = document.createDocumentFragment();
const results = document.getElementById('results');
for (let i = 0; i < 5; i++) {
const item = document.createElement('div');
item.textContent = `Item ${i + 1}`;
fragment.append(item);
}
results.append(fragment);
</script>
</body>
</html>
Here we create multiple elements within a document fragment before appending them to the DOM. This minimizes reflows and improves performance.
This shows an advanced use of append() with document fragments.
Fragments are useful when adding multiple elements to the DOM efficiently.
Source
In this article, we have shown how to use the append() method in
JavaScript. This method is fundamental for DOM manipulation and element addition
in modern web development.
Author
List all JS DOM tutorials.