Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to append data to element using JavaScript?
We can append data to an HTML element using JavaScript through several methods. The most common approaches include using the innerHTML property, appendChild() method, and the modern append() method.
What is Element Appending?
Appending data to an element means adding new content to the end of an element's existing content without replacing what's already there. This is essential for dynamic web applications where content needs to be added based on user interactions or data updates.
Method 1: Using innerHTML Property
The innerHTML property allows you to add HTML content as a string:
<!DOCTYPE html>
<html>
<head>
<title>Append with innerHTML</title>
</head>
<body>
<div id="content">
<p>Original content</p>
</div>
<script>
var div = document.getElementById('content');
div.innerHTML += '<p>New content appended!</p>';
</script>
</body>
</html>
Method 2: Using appendChild() Method
The appendChild() method adds a new DOM node as the last child of the selected element:
<!DOCTYPE html>
<html>
<head>
<title>Append with appendChild</title>
</head>
<body>
<div id="content">
<p>Original content</p>
</div>
<script>
var div = document.getElementById('content');
var newParagraph = document.createElement('p');
newParagraph.textContent = 'Appended with appendChild!';
div.appendChild(newParagraph);
</script>
</body>
</html>
Method 3: Using append() Method (Modern)
The append() method is more flexible and can accept both strings and DOM nodes:
<!DOCTYPE html>
<html>
<head>
<title>Append with append()</title>
</head>
<body>
<div id="content">
<p>Original content</p>
</div>
<script>
var div = document.getElementById('content');
// Append text directly
div.append('Just some text');
// Append multiple elements
var span = document.createElement('span');
span.textContent = ' and a span element';
div.append(span);
</script>
</body>
</html>
Comparison of Methods
| Method | Input Type | Performance | Browser Support |
|---|---|---|---|
innerHTML += |
HTML strings | Slower (rebuilds DOM) | All browsers |
appendChild() |
DOM nodes only | Faster | All browsers |
append() |
Strings and nodes | Fast | Modern browsers |
Complete Example
<!DOCTYPE html>
<html>
<head>
<title>Append Data Methods Comparison</title>
</head>
<body>
<div id="demo1"><h3>innerHTML Method:</h3></div>
<div id="demo2"><h3>appendChild Method:</h3></div>
<div id="demo3"><h3>append Method:</h3></div>
<script>
// Method 1: innerHTML
document.getElementById('demo1').innerHTML += '<p style="color:blue;">Added with innerHTML</p>';
// Method 2: appendChild
var demo2 = document.getElementById('demo2');
var p2 = document.createElement('p');
p2.style.color = 'green';
p2.textContent = 'Added with appendChild';
demo2.appendChild(p2);
// Method 3: append
var demo3 = document.getElementById('demo3');
var p3 = document.createElement('p');
p3.style.color = 'red';
p3.textContent = 'Added with append';
demo3.append(p3);
</script>
</body>
</html>
Key Points
- Use
innerHTML +=for simple HTML string additions - Use
appendChild()when working with DOM nodes and need broad browser support - Use
append()for modern applications requiring flexibility with multiple data types - Always select the target element first using methods like
getElementById()
Conclusion
JavaScript provides multiple ways to append data to elements, each with distinct advantages. Choose appendChild() for performance and compatibility, or append() for modern applications requiring flexibility with different content types.
23K+ Views
