Question

我希望创建div，div的内容，将它们分别放在标签中，然后使用JavaScript将分配给。

我要为自己的情况提前道歉。

这是现在侧边栏的内部外观：

<div id="sidebar">
  <a href="link.a"><div>item a</div></a>
  <a href="link.b"><div>item b</div></a>
  <a href="link.c"><div>item c</div></a>
</div>

我想使用两个数组在“侧边栏” div中创建内部

：

var linkList = ["link.a", "link.b", "link.c"];
var titleList = ["item a", "item b", "item c"];

我希望最终的html代码看起来像这样：

<div id="sidebar" onload="createLinks()">
</div>

不幸的是，我不知道如何编写JavaScript来完成这项工作。如果有人可以帮助我，那就太好了！

Answer 1

您可以使用forEach()遍历一个数组，并使用insertAdjacentHTML添加html。

注意：如评论onload中提到的某些用户不能在元素上使用。您可以在window.onload内调用该函数，也可以将<script>放在<body>的末尾

var linkList = ["link.a", "link.b", "link.c"];
var titleList = ["item a", "item b", "item c"];

let sidebar = document.querySelector('#sidebar');

linkList.forEach((x,i) => {
  sidebar.insertAdjacentHTML("beforeend",`<a href="${x}"><div>${titleList[i]}</div></a>`)
})

<div id="sidebar">
</div>

如何使用JavaScript创建链接和div列表

1 个答案: