Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 28 Feb, 2020

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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:



My Personal Notes arrow_drop_up
Recommended Articles
Page :