How to insert a js array into html using innerHTML? - innerhtml

Question

In order to build a more clean code, i would like to delete an unordered list from html file and insert instead a js array using innerHTML. The problem is that i am new to html/css/js and I have a lot of difficulties in typing the correct syntax and understanding the logic.
In my html file i had a div with id="listOfBeaches "containing a list with beaches. if i delete the ul and I try to insert instead a js array i don't get any result.
<div id="listOfBeaches">
<ul>
<li><h3>Horseshoe Bay</h3></li>
<li><h3>Trunk BAy</h3></li>
<li><h3>El Nido</h3></li>
<li><h3>Reethi Rah</h3></li>
<li><h3>Maundays Bay</h3></li>
</ul>
</div>
I try to replace this html code with the following js code
let beaches= [
{
name: 'Horseshoe Bay',
url: './Horseshoe.html',
},
{
nume: 'Trunk BAy',
url: './Trunk-bay.html',
},
{
name: 'El Nido',
url: './El-Nido.html'
},
{
name: 'Reethi Rah',
url: './Rheeti-Rah.html'
},
{
name: 'Maundays Bay',
url: './Maundays-BAy.html'
}
];
let myBeaches = '';
for (let i = 0; i < beaches.length; i++){
myBeaches = beaches[i].name;
}
document.getElementById('listOfBeaches').innerHTML(myBeaches);
The result should be a list of beaches at the top of my webpage
Can I get any help from you guys?

Answer 1

If you were to look at the output of document.getElementById('listOfBeaches').innnerHTML you would see that it would contain
<ul>
<li><h3>Horseshoe Bay</h3></li>
<li><h3>Trunk BAy</h3></li>
<li><h3>El Nido</h3></li>
<li><h3>Reethi Rah</h3></li>
<li><h3>Maundays Bay</h3></li>
</ul>
So as such, you'll need to build up a similar html entry if you want to replace it using the innerHtml method. You could do something as such:
https://jsfiddle.net/nshe1qL8/