时间戳

首页 > 解决方案 > 在 HTML 上使用 JS 创建带有 href 的动态列表

javascript - 在 HTML 上使用 JS 创建带有 href 的动态列表

问题描述

有人可以帮我用 Href 创建一个动态列表吗？我只知道如何添加列表，但我不知道如何为每个列表添加链接

<h1>Toppings</h1>
<ul>
 
</ul>
<script>
var toppings = ['tomatoes', 'olives', 'cheese', 'peperonies']
</script>

现在我想要一个包含链接的动态列表，而不仅仅是列表。有人能帮我吗。

标签： javascripthtmlcss

解决方案

您需要在列表项中为每个顶部创建一个锚标记并将其附加到您的无序列表

<h1>
    Toppings
</h1>
<ul id="toppings-list">

</ul>
<script>
    let toppings = ['tomatoes', 'olives', 'cheese', 'peperonies'];
    const toppingsList = document.querySelector('#toppings-list');

    toppings.forEach(topping => {
        const listItem = document.createElement('li');
        const link = document.createElement('a');
        link.setAttribute('href', topping);
        link.innerText = topping;

        listItem.appendChild(link);
        toppingsList.appendChild(listItem);
    
    });
</script>

推荐阅读