时间戳

首页 > 解决方案 > 放置按钮迭代列表

javascript - 放置按钮迭代列表

问题描述

我想创建这些按钮：

<!DOCTYPE html>
<html>
<body>

<button type="button">Linear algebra    </button>
<button type="button">Calculus I    </button>
<button type="button">Basic Mechanics    </button>
<button type="button">Mechanics1    </button>
<button type="button">Mechanics2    </button>
<button type="button">Mechanics3    </button>
<button type="button">Mechanics4    </button>
<button type="button">Mechanics5    </button>

</body>
</html>

而且我想知道是否有一个选项可以在列表更长时使用功能。我的想法是创建以下列表：

var subjects=["Linear algebra","Calculus I","Basic Mechanics","Mechanics1","Mechanics2","Mechanics3","Mechanics4","Mechanics4"]

并使用 for 循环对其进行迭代，然后使用列表中每个元素的结果创建按钮。这可能吗？

标签： javascripthtmlfor-loopweb

解决方案

您可以使用Array forEach遍历数组，使用createElement创建按钮并使用appendChild将它们附加到需要的 DOM 中。

var subjects=["Linear algebra","Calculus I","Basic Mechanics","Mechanics1","Mechanics2","Mechanics3","Mechanics4","Mechanics4"]

subjects.forEach(function(item){
    var button = document.createElement('button');
    button.type = 'button';
    button.innerHTML = item;
    document.body.appendChild(button);
})

推荐阅读