Javascript-作为循环的导航

我想创建一个简单的导航：

<ul>
    <li><a href="#div1">Div1-name</a></li>
    <li><a href="#div2">Div2-name</a></li>
    <li><a href="#div3">Div3-name</a></li>
</ul>

单击时，它会转到具有该id的div。我不想永久这样做，它应该在循环中更改，因为用户可以添加新项目，并希望它们被循环

用户添加具有唯一名称和ID的新div-如何构造循环

最好为div设置一个常量类（例如gohere），您必须通过javascript加载它，然后在循环中执行li元素

有人能帮忙吗

这些是用户添加的元素：

<div class="divdiv" id="div_id">
    <h3>DIV TITLE</h3>
    <br>
        Description
    <br>
    <p>Description</p>
    <hr>
</div>

部门名称


描述


描述

将导航详细信息保存在数组中，然后对其进行迭代

用于解析用户添加以提取导航信息的HTML

const arr=[
{href:“div1”，name:'div1 name'}，
{href:“div2”，name:'div2 name'}，
{href:“div3”，name:'div3 name'}
];
const nav=document.querySelector（“#nav”）；
const main=document.querySelector（'#main'）；
const text=document.querySelector（'textarea'）；
const button=document.querySelector（'button'）；
按钮。addEventListener（'click'，handleInput，false）；
const parser=new DOMParser（）；
函数handleInput（）{
//将HTML添加到页面中
main.insertAdjacentHTML（'beforeend'，text.value）；
//解析HTML
const frag=parser.parseFromString（text.value，'text/html'）；
//提取id（href）和名称
const href=frag.querySelector（'div'）.id；
const name=frag.querySelector（'h3'）.textContent；
//将其添加到导航阵列
//到阵列
arr.push（{href:`${href}`，name:name}）；
updateView（）；
}
函数updateView（）{
//'map'在这里很有用。它将生成一个新数组
//（指HTML），但请确保在结尾处“连接”它
const links=arr.map（（{href，name}）=>{
返回`
`；
}).加入（“”）；
nav.innerHTML=`
${links}
`；
}
updateView（）

添加HTML：
添加
好的，很难准确理解您的要求，但这里有一个（有点不太清楚的）示例。我希望它能在正确的方向上帮助你


var items=document.getElementById（'items'）；
var main=document.getElementById（'main'）；
items.addEventListener（'click'，e=>{
e、 预防默认值（）；
如果（e.target.nodeName=='A'）{
log（`youclicked${e.target.attributes['href'].value}`）；
}
});
document.forms.new.addEventListener（'submit'，e=>{
e、 预防默认值（）；
设newid=items.children.length+1；
console.log（newid）；
让li=`
`；
items.innerHTML+=li；
设div=`
DIV TITLE
Description
Description
`；
main.innerHTML+=div；
});





新增
我想你可能需要明确你的意思，我正在努力理解这个“循环”。你说的是旋转木马类型的组件吗？@DBS No.在循环中列出项目（ul/li）。下面是一个PHP示例：
那么，您是在问如何在JS循环中向DOM追加元素吗？（如果是这样的话，我们可能需要看到您想要转换为元素的JS数据结构）@DBS我想是的。用户添加具有唯一id和标题的div。我希望UL中的循环列出所有元素（即新块的名称+其ID中的href）。div元素是在用户单击菜单项时添加的还是两个独立的元素？谢谢，但我认为我写错了。我的英语很差。用户将这些项目作为块添加到PRESTA中。它只是添加了一个具有唯一标题和ID的diva。导航中只显示名称。所以Javascript需要获取这些添加项的ID/标题，并将它们作为导航进行循环。那么，用户是否只是在文本框中添加该HTML，而您问的是如何从该HTML中获取详细信息？完全正确：）用户从HTML中添加块。当然，这里的头衔和身份都会改变。导航是这些HTML块的标题和ID的列表。我已经更新了答案@QEX41不幸的是，它不起作用：/很可能是我误解了它。你能为元素解析编写这段代码吗？没有这些按钮等，这是不需要的。因为我尝试了，但控制台中有错误。你能测试代码吗？再次感谢您的帮助。谢谢，但这里的情况与前一个相同。用户将这些项目作为块添加到PRESTA中。它只添加一个具有唯一标题和ID的div。导航中只显示名称。因此Javascript需要获取这些添加项的ID/标题，并将它们作为导航循环用户从HTML添加块。当然，这里的头衔和身份都会改变。导航是这些HTML块的标题和ID的列表