There are a few ways to approach this, but many of the "shortcuts" will have unintended secondary effects. The best way to do this cleanly is to create the elements that you want to populate and append them into the DOM at your point of interest. For example:
<html>
<head>
<script type="text/javascript">
let personArr = [
{firstName:"John", lastName:"Doe", age:21},
{firstName:"Paul", lastName:"Logan", age:22},
{firstName:"Sean", lastName:"Kim", age:32},
{firstName:"Ken", lastName:"Chow", age:12}
];
let peopleDiv = document.getElementById('People');
for(let i=0;i<personArr.length;i++){
let newElement = document.createElement('h6');
newElement.innerHTML = personArr[i].firstName;
peopleDiv.appendChild(newElement);
}
</script>
</head>
<body>
<div id="People"></div>
</body>
</html>
if you need to do this with a multi-dimensional array you can make your DOM assignments from a nested loop.
Submit an article or tip