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

【问题标题】：How to create a list of links and divs with JavaScript如何使用 JavaScript 创建链接和 div 列表
【发布时间】：2019-08-31 04:22:42
【问题描述】：

我希望创建 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 代码来完成这项工作。如果有人可以帮助我，那就太好了！

【问题讨论】：

onload 不会像这样工作，因为它在 div 元素上不可用。
好的，有其他方法可以解决吗？
你可以将 onload 放到 body 元素上，在你的脚本中监听 load 事件或者用 defer 标记你的脚本。

标签： javascript html arrays hyperlink

【解决方案1】：

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

注意：正如某些用户在 cmets 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>

【讨论】：