- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Display array items on a div element on click of button using vanilla JavaScript
To embed the elements of an array inside a div, we just need to iterate over the array and keep appending the element to the div
This can be done like this −
Example
const myArray = ["stone","paper","scissors"]; const embedElements = () => { myArray.forEach(element => { document.getElementById('result').innerHTML += `<div>${element}</div><br />`; // here result is the id of the div present in the DOM }); };
This code makes the assumption that the div in which we want to display the elements of array has an id ‘result’.
The complete code for this will be −
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="result"></div> <button onclick="embedElements()">Show Data</button> <script> { const myArray = ["stone","paper","scissors"]; function embedElements(){ myArray.forEach(el => { document.getElementById('result').innerHTML +=`<div>${el}</div><br />`; // here result is the id of the div present in the dom }); }; } </script> </body> </html>
Output
On clicking the button “Show Data”, the following is visible −
- Related Articles
- How to display JavaScript array items one at a time in reverse on button click?
- How to hide a div in JavaScript on button click?
- JavaScript Sum function on the click of a button
- How to trigger a button click on keyboard "enter" with JavaScript?
- How to remove li elements on button click in JavaScript?
- Get div height with vanilla JavaScript
- Trigger a button click and generate alert on form submission in JavaScript
- How to detect click on HTML button through javascript in Android WebView using Kotlin?
- How to add and remove names on button click with JavaScript?
- How to click on a button with Javascript executor in Selenium with python?
- How to enable the “disabled” attribute using jQuery on button click?
- Add a pressed effect on button click with CSS
- Multi-selection of Checkboxes on button click in jQuery?
- How can I show and hide div on mouse click using jQuery?
- How to detect click on HTML button through javascript in Android WebView?

Advertisements