In JavaScript, multiple elements can be created and appended to an existing <div> or other DOM element dynamically. This is useful when adding lists, cards, or other content based on an array or user interaction.
- Elements can be appended using jQuery or native JavaScript methods.
- HTML strings can be combined before adding them to the DOM.
- DocumentFragment can efficiently append multiple elements at once.
Approach 1: Using jQuery append() Method
The jQuery append() method adds content to the end of a selected element. In this approach, each list item is created as an HTML string and appended individually.
Example: In this example, multiple language names are appended to a list using jQuery.
<!DOCTYPE html>
<html>
<head>
<title>Append Elements Using jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
const elements = [
"C", "C++", "Java", "Python",
"R", "Perl", "C#", "PHP"
];
function addElementsByJQuery() {
for (let i = 0; i < elements.length; i++) {
$("#languages").append(
"<li>" + elements[i] + "</li>"
);
}
}
</script>
</head>
<body>
<button onclick="addElementsByJQuery()">
Append Elements Using jQuery
</button>
<div id="languagesDiv">
<ul id="languages">
<li>JavaScript</li>
</ul>
</div>
</body>
</html>
Output: After clicking the button, the language names are added to the list.
Approach 2: Combining Elements as an HTML String
In this approach, all list items are first combined into a single HTML string. The complete string is then appended to the existing element.
Example: In this example, multiple elements are combined before being appended to the list.
<!DOCTYPE html>
<html>
<head>
<title>Append Elements Using a String</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
const elements = [
"C", "C++", "Java", "Python",
"R", "Perl", "C#", "PHP"
];
function addElementsUsingString() {
let nodesString = "";
for (let i = 0; i < elements.length; i++) {
nodesString += "<li>" + elements[i] + "</li>";
}
$("#languages").append(nodesString);
}
</script>
</head>
<body>
<button onclick="addElementsUsingString()">
Append Elements Using String
</button>
<div id="languagesDiv">
<ul id="languages">
<li>JavaScript</li>
</ul>
</div>
</body>
</html>
Output: All the language names are appended to the list when the button is clicked.
Approach 3: Using JavaScript with DocumentFragment
This approach uses native JavaScript to create elements with createElement(). A DocumentFragment stores the new elements temporarily before they are appended to the DOM.
Example: In this example, multiple list items are created and appended using pure JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Append Elements Using JavaScript</title>
</head>
<body>
<button onclick="addElementsByJavaScript()">
Append Elements Using JavaScript
</button>
<div id="languagesDiv">
<ul id="languages">
<li>JavaScript</li>
</ul>
</div>
<script>
const elements = [
"C", "C++", "Java", "Python",
"R", "Perl", "C#", "PHP"
];
function addElementsByJavaScript() {
const fragment = document.createDocumentFragment();
for (let i = 0; i < elements.length; i++) {
const item = document.createElement("li");
item.textContent = elements[i];
fragment.appendChild(item);
}
const ulElement =
document.getElementById("languages");
ulElement.appendChild(fragment);
}
</script>
</body>
</html>
Output: After clicking the button, all the language names are appended to the existing list.
The DocumentFragment approach is generally preferred when creating and adding multiple DOM elements because it allows the elements to be prepared before being appended to the document.
