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.

   


   
Using the  innerHTML property  to append multiple HTML elements to the particular HTML element
   
 This is the HTML div element.
    Append elements
   

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 row 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.

   
   


   
Using the JQuery append() method to append multiple HTML elements to the particular HTML element 
   
 testing content. 


    Append elements 
   

In the above output, users can observe that it appends the HTML element to the div element with the id ?content? when they click the button.

Use the after() method of JavaScript

JavaScript contains the after() method to add HTML elements after a particular element. We can pass row HTML by comma-separated or elements after creating in JavaScript as a parameter 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 a parameter of the after() method to append them after a div element.

   


   
Using the after() method to append multiple HTML elements to the particular HTML element
   
 testing content. 
    Combine elements 
   

Users learned three approaches to combine multiple HTML elements in JavaScript and append the resultant element to any HTML element. In the first approach, users can store multiple elements in a single variable using the += operator, and after, we can assign the resultant element?s value to the innerHTML property.