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

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

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.

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

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.

Updated on: 19-Jan-2023

6K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements