Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Display array items on a div element on click of button using vanilla JavaScript
To display array items in a div element when a button is clicked, we need to iterate through the array and append each element to the target div. This is commonly done using JavaScript's forEach() method or a simple loop.
Basic Approach
The core concept involves selecting the target div using getElementById() and updating its innerHTML property with array elements:
const myArray = ["stone", "paper", "scissors"];
const embedElements = () => {
myArray.forEach(element => {
document.getElementById('result').innerHTML +=
`<div>${element}</div><br />`;
// 'result' is the id of the div in the DOM
});
};
Complete Working Example
Here's a complete HTML document demonstrating how to display array items on button click:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Array Items</title>
</head>
<body>
<div id="result"></div>
<button onclick="embedElements()">Show Data</button>
<script>
const myArray = ["stone", "paper", "scissors"];
function embedElements() {
// Clear previous content first
document.getElementById('result').innerHTML = '';
myArray.forEach(element => {
document.getElementById('result').innerHTML +=
`<div>${element}</div><br />`;
});
}
</script>
</body>
</html>
Alternative Method Using createElement
Instead of using innerHTML, you can create DOM elements dynamically for better performance:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Array Items - Alternative</title>
</head>
<body>
<div id="result"></div>
<button onclick="showArrayItems()">Show Data</button>
<script>
const fruits = ["Apple", "Banana", "Orange", "Mango"];
function showArrayItems() {
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = ''; // Clear previous content
fruits.forEach(fruit => {
const itemDiv = document.createElement('div');
itemDiv.textContent = fruit;
itemDiv.style.margin = '5px 0';
itemDiv.style.padding = '10px';
itemDiv.style.backgroundColor = '#f0f0f0';
itemDiv.style.border = '1px solid #ccc';
resultDiv.appendChild(itemDiv);
});
}
</script>
</body>
</html>
Output
Key Points
- Clear Previous Content: Always clear the div's innerHTML before adding new content to prevent duplication on multiple clicks
- Template Literals: Use backticks (`) for cleaner HTML string formatting
-
Event Handling: The
onclickattribute directly calls the JavaScript function -
DOM Manipulation:
createElement()method provides better performance for complex operations
Conclusion
Displaying array items in a div on button click is straightforward using forEach() and innerHTML. Remember to clear previous content and consider using createElement() for better performance with large datasets.
4K+ Views
