时间戳

首页 > 解决方案 > 如何使用 JavaScript 创建链接和 div 列表

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

问题描述

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

标签： javascripthtmlarrayshyperlink

解决方案

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

注意：由于评论中提到的某些用户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>

推荐阅读