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

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.