Create an element in your HTML page that will contain the output and assign it an appropriate unique id, such as “target-id”. Then use innerHTML and getElementById to print Array to HTML using JavaScript.
JavaScript print Array to HTML
Simple example code printing array elements.
<!DOCTYPE html>
<html>
<body>
<pre id="arrPrint"></pre>
<script>
let arr = ["Jack", "Mike", "Steve"];
document.getElementById("arrPrint").innerHTML = arr;
</script>
</body>
</html>
Output:
You can loop over the array and print each element to the console as follows:
let arr = ["A", "B", "C"];
for(let i = 0; i < arr.length; i++){
console.log(arr[i]);
}Output:
> "Jack"
> "John"
> "James"Print JavaScript array in HTML using jQuery
<script>
var parsed = "";
var myObject = [{
firstname: "Jane",
lastname: "Doe",
email: "[email protected]"
}, {
firstname: "Ja",
lastname: "joe",
email: "[email protected]"
}, {
firstname: "Janet",
lastname: "joes",
email: "[email protected]"
}];
for (i = 0; i< myObject.length; i++) {
var myobj= myObject[i];
for (var property in myobj) {
parsed += property + ": " + myobj[property] + "\n";
}
}
</script>Output:
firstname: Jane
lastname: Doe
email: [email protected]
firstname: Ja
lastname: joe
email: [email protected]
firstname: Janet
lastname: joes
email: [email protected]Do comment if you have any doubts or suggestions on this JS print topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version