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

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.
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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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>       
<!DOCTYPE html><html>  <head>    <title>        Appending new elements to document body .    </title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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>  
<!DOCTYPE html><html>  <head>    <title>        Appending new elements to document body .    </title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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>    
<!DOCTYPE html><html>  <head>    <title>        Appending new elements to document body .    </title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-DOM
JavaScript-Misc
Picked
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
How to calculate the number of days between two dates in javascript?
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?