Question

为了构建更简洁的代码，我想从html文件中删除无序列表，并使用innerHTML插入js数组。问题是我是html / css / js的新手，在键入正确的语法和理解逻辑方面遇到很多困难。

在我的html文件中，我有一个id =“ listOfBeaches”的div，其中包含一个包含海滩的列表。如果我删除ul并尝试插入js数组，则不会得到任何结果。

<div id="listOfBeaches"> 
    <ul>
        <li><h3><a href="./Horseshoe.html"target="_blank">Horseshoe Bay</a></h3></li>
        <li><h3><a href="./Trunk-bay.html"target="_blank">Trunk BAy</a></h3></li>
        <li><h3><a href="./El-Nido.html"target="_blank">El Nido</a></h3></li>
        <li><h3><a href="./Rheeti-Rah.html"target="_blank">Reethi Rah</a></h3></li>
        <li><h3><a href="./Maundays-BAy.html"target="_blank">Maundays Bay</a></h3></li>
    </ul>
</div>

我尝试用以下js代码替换此html代码

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);

结果应该是我网页顶部的海滩列表我能从你们那里得到任何帮助吗？

Answer 1

如果要查看document.getElementById('listOfBeaches').innnerHTML的输出，您会发现其中将包含

<ul>
    <li><h3><a href="./Horseshoe.html"target="_blank">Horseshoe Bay</a></h3></li>
    <li><h3><a href="./Trunk-bay.html"target="_blank">Trunk BAy</a></h3></li>
    <li><h3><a href="./El-Nido.html"target="_blank">El Nido</a></h3></li>
    <li><h3><a href="./Rheeti-Rah.html"target="_blank">Reethi Rah</a></h3></li>
    <li><h3><a href="./Maundays-BAy.html"target="_blank">Maundays Bay</a></h3></li>
</ul>

因此，如果要使用innerHtml方法替换它，则需要建立一个类似的html条目。您可以这样做：

https://jsfiddle.net/nshe1qL8/

如何使用innerHTML将js数组插入html？

1 个答案: