javascript Navigation（列表），如何动态添加元素

Question

我在一个子页面上添加块 - 这是一个 HTML 代码。这些块越来越多，我想让自己更容易导航。块一个接一个地显示。在子页面的最顶部有“导航”——div 标题和 href = id div 属性。

这里是“导航”代码：

<ul>
    <li><a href="#tips1">Tips - Lorem</a></li>
    <li><a href="#tips2">Tips 2 - How to</a></li>
    <li><a href="#tips3">Tips 3 - Hello World</a></li>
</ul>

这些是我添加的块（每个块在 h3 标签中都有不同的 id 和不同的标题）：

<div id="tips1">
    <h3>Tips - Lorem</h3>
    <p>Lorem ipsum. Lorem ipsum.</p>
</div>

我只是将块添加为 HTML 代码。如何使这个导航动态化？ Foreach 循环？

问候雅各布。

Answer 1

您可以维护一个数组并使用map() 来迭代和显示。或foreach()。如果你打算使用 JavaScript

Answer 2

这是我使用 foreach 循环在表格标签内创建动态 td 的代码 请正确阅读这篇文章，我相信它会对你有所帮助

let myTr = document.getElementById("myTr");
let data = ['B','C'];

data.forEach(item => {
  let td = document.createElement("TD");
  td.innerHTML = item;
  myTr.appendChild(td);
});