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 combine multiple elements and append the result into a div using JavaScript?
Sometimes, we require to manipulate the HTML elements using JavaScript. So, we can use JavaScript to add or remove HTML elements. This tutorial will teach us to combine multiple HTML elements in a single shot using JavaScript.
Sometimes we need to show some HTML elements to users when they click the button or particular event triggers. So, we can use the approaches below to combine multiple elements and append the result into a div element using JavaScript.
Use the innerHTML Property
The innerHTML, as the name suggests, allows us to set the HTML for any particular element using JavaScript. Using the assignment operator with the innerHTML property replaces the HTML of a particular element.
When we use the += operator with the innerHTML property, we can append multiple elements to the particular HTML element.
Syntax
You can follow the syntax below to use the innerHTML property to combine multiple elements and append them to the div element.
test_div.innerHTML += html;
In the above syntax, test_div is an HTML element accessed via JavaScript.
Example
In the example below, we are making the five iterations of the for-loop. We are appending some HTML to the div element in every loop iteration using the innerHTML property.
<html>
<head>
<style>
button {
font-size: 1.3rem;
background-color: aqua;
border-radius: 10px;
color: blue;
margin: 10px;
}
</style>
</head>
<body>
<h3>Using the <i> innerHTML property </i> to append multiple HTML elements to the particular HTML element</h3>
<div id="test_div"> This is the HTML div element.</div>
<button onclick="appendEle()"> Append elements</button>
<script>
function appendEle() {
let test_div = document.getElementById("test_div");
for (let i = 0; i < 5; i++) {
test_div.innerHTML += "<p> digit is " + i + " </p>";
}
}
</script>
</body>
</html>
Use jQuery append() Method
We can use the append() method to append HTML to the particular element using jQuery. We can use the append() method multiple times to append multiple elements to a particular HTML element.
Syntax
Users can follow the syntax below to use the append() method of jQuery to append multiple HTML elements to a particular HTML element.
$('#content').append(html)
In the above syntax, html is a raw HTML containing multiple or single elements to append at the end of the HTML element.
Example
In the example below, when the user clicks the button, it invokes the appendHTML() function. In the appendHTML() function, we have used the loop to append multiple HTML elements to a particular element. Users can see that we are appending the new HTML element in every loop iteration using the jQuery append() method.
<html>
<head>
<style>
div {
font-size: 1.5rem;
background-color: yellow;
color: black;
width: 250px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<h3>Using the <i>jQuery append()</i> method to append multiple HTML elements to the particular HTML element</h3>
<div id="content"> testing content. </div><br>
<button onclick="appendHTML()"> Append elements </button>
<script>
function appendHTML() {
for (let i = 0; i < 10; i++) {
$('#content').append('<div> This div is appended! </div>');
}
}
</script>
</body>
</html>
Use the after() Method of JavaScript
JavaScript contains the after() method to add HTML elements after a particular element. We can pass raw HTML or elements created in JavaScript as parameters of the after() method.
Syntax
Users can follow the syntax below to use the after() method of JavaScript to append multiple elements to the HTML element without combining them into a single element.
div_Element.after(elements);
Parameters
-
elements ? They are multiple HTML comma-separated elements to add after a particular HTML element.
Example
In the example below, the concatElements() function executes when the user clicks the button. In the concatElements() function, we have used the createElement() method to create an HTML element and used the innerHTML property to add html to that.
After that, we passed element1 and element2 as parameters of the after() method to append them after a div element.
<html>
<head>
<style>
div {
font-size: 1.5rem;
background-color: yellow;
color: black;
width: 250px;
}
p {
font-size: 1rem;
background-color: blue;
color: white;
width: 250px;
padding: 5px;
}
</style>
</head>
<body>
<h3>Using the <i>after()</i> method to append multiple HTML elements to the particular HTML element</h3>
<div id="content"> testing content. </div>
<button onclick="concatElements()"> Combine elements </button>
<script>
function concatElements() {
let element1 = document.createElement('p');
element1.innerHTML = "This is a first element!";
let element2 = document.createElement('p');
element2.innerHTML = "This is a second element!";
let div_Element = document.getElementById('content');
div_Element.after(element1, element2);
}
</script>
</body>
</html>
Use DocumentFragment for Performance
When adding many elements at once, using DocumentFragment provides better performance by minimizing DOM reflow operations.
Example
<html>
<head>
<style>
.item {
background-color: lightblue;
padding: 10px;
margin: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<h3>Using DocumentFragment for efficient element addition</h3>
<div id="container"> Container: </div>
<button onclick="addFragments()"> Add with Fragment </button>
<script>
function addFragments() {
let fragment = document.createDocumentFragment();
for (let i = 1; i <= 5; i++) {
let div = document.createElement('div');
div.className = 'item';
div.textContent = 'Item ' + i;
fragment.appendChild(div);
}
document.getElementById('container').appendChild(fragment);
}
</script>
</body>
</html>
Comparison of Methods
| Method | Performance | Dependencies | Best For |
|---|---|---|---|
| innerHTML | Good | None | Simple HTML strings |
| jQuery append() | Good | jQuery library | Complex operations |
| after() | Good | None | Adding after elements |
| DocumentFragment | Excellent | None | Many elements at once |
Conclusion
JavaScript provides multiple approaches to combine and append HTML elements. Use innerHTML for simple operations, jQuery append() for enhanced functionality, and DocumentFragment for optimal performance when adding many elements simultaneously.
8K+ Views
