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><scriptsrc=</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><buttononclick="AddNewElementsByJquery()">Append Elements Using jQuery</button><divid="LanguagesDiv"><ulid="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><scriptsrc=</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><buttononclick="AddNewElementUsingString()">AppendElements Using String</button><divid="LanguagesDiv"><ulid="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><scriptsrc=</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++) {vare=document.createElement("li");e.innerHTML=Elements[i];fragment.appendChild(e);}varUlElement=document.getElementById('Languages');UlElement.appendChild(fragment);}</script></head><body><buttononclick="AddElementsByPureJs()">AppendElements Using Javascript</button><divid="LanguagesDiv"><ulid="Languages"><li>JavaScript</li></ul></div></body></html> -
output: