Open In App

How to Combine multiple elements and append the result into a div using JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

Combining multiple elements and appending elements to DOM is a crucial process, it would become a time-consuming process. If not handled properly so as a developer we should know how to update the DOM effectively. So following are the three ways to append HTML elements to DOM. The following methods are in decreasing order of time complexity.

  • Use jQuery’s append method.
  • Appending elements using strings instead of nodes.
  • Use pure JavaScript to create and append node.

For this guide, we will assume that our task is to append 10 list items to the body of a webpage.

Approach 1: This approach uses jQuery append() method to put the DOM element that you want to insert.

  • Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            Appending new elements to document body .
        </title>
        <script src=
        </script>
        <script>
            var Elements = ["C", "C++", "Java", "Python",
                            "R", "Perl", "C#", "PHP"];
      
            function AddNewElementsByJquery() {
                for (var i = 0; i < Elements.length; i++) {
                    $("#Languages")
                    .append('<li>' + Elements[i] + '</li>');
                }
            }
        </script>
    </head>
      
    <body>
        <button onclick="AddNewElementsByJquery()">
            Append Elements Using jQuery
        </button>
        <div id="LanguagesDiv">
            <ul id="Languages">
                <li>JavaScript</li>
            </ul>
        </div>
    </body>
      
    </html>       

    
    

  • output:

Approach 2: Appending elements using strings instead of nodes. Declare an empty JavaScript string to store HTML elements in that string. Keep adding new elements to a string. Append that string to document or some already existing DOM node using jQuery’s append() method.

  • Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            Appending new elements to document body .
        </title>
        <script src=
        </script>
        <script>
            var Elements = ["C", "C++", "Java", "Python",
                            "R", "Perl", "C#", "PHP"];
      
            function AddNewElementUsingString() {
                var NodesString = "";
                for (var i = 0; i < Elements.length; i++) {
                    NodesString += "<li>" + Elements[i] + "</li>";
                }
                var UlElement = document.getElementById('Languages');
                $("#Languages").append(NodesString);
            }
        </script>
    </head>
      
    <body>
        <button onclick="AddNewElementUsingString()">
          AppendElements Using String
        </button>
        <div id="LanguagesDiv">
            <ul id="Languages">
                <li>JavaScript</li>
            </ul>
        </div>
    </body>
      
    </html>  

    
    

  • Output:

Approach 3: Appending elements using pure JavaScript. Use document.createElement() method with Tag name of element in Argument. Set values in the properties of elements. Here are setting the innerHTML property of the list element. Append the newly created element in a fragment using the appendChild method. Append the fragment to the body of DOM or some already existing node of DOM.

  • Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            Appending new elements to document body .
        </title>
        <script src=
        </script>
        <script>
            var Elements = ["C", "C++", "Java", "Python", 
                            "R", "Perl", "C#", "PHP"];
      
            function AddElementsByPureJs() {
                var fragment = document.createDocumentFragment();
                for (var i = 0; i < Elements.length; i++) {
                    var e = document.createElement("li");
                    e.innerHTML = Elements[i];
                    fragment.appendChild(e);
                }
                var UlElement = document.getElementById('Languages');
                UlElement.appendChild(fragment);
            }
        </script>
    </head>
      
    <body>
        <button onclick="AddElementsByPureJs()">
          AppendElements Using Javascript
        </button>
        <div id="LanguagesDiv">
            <ul id="Languages">
                <li>JavaScript</li>
            </ul>
        </div>
    </body>
      
    </html>    

    
    

  • output:


Last Updated : 28 Feb, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads