我想创建一个包含我的视频的列表。我尽力了，但没有成功。下面是我的代码。
我的代码有问题吗？
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<button onclick="generateList();">Click on me</button>
<script>
function generateList() {
var listItems = [{
filename: "Besabriyaan",
path: "videos/Besabriyaan.mp4"
}, {
filename: "Parwah nahin",
path: "videos/Parwah nahin.mp4"
}, {
filename: "Laila main laila",
path: "videos/Laila main laila.mp4"
}, {
filename: "Kaabil trailer",
path: "videos/Kaabil trailer.mp4"
}];
var list = document.createElement("ul");
list.setAttribute("id", "song lists");
document.body.appendChild(list);
for (i = 0; i < listItems.length; i++) {
var li[i] = document.createElement("li");
var a[i] = document.createElement("a");
a[i].setAttribute("id", listItems.length + 1);
a[i].setAttribute("href", listItems[i].path);
var filename[i] = document.createTextNode(listItem[i].filename);
a[i].appendChild(filename[i]);
li[i].appendChild(a[i]);
list.appendChild(li[i]);
}
};
</script>
</body>
</html>最佳答案
您的代码中几乎没有问题。
在循环内声明的变量使用不正确的索引声明并抛出错误。声明您的变量，如 var li, var a ，这些变量将在下一次迭代中被覆盖。
代码中没有 listItem 对象，它是 listItems
function generateList() {
var listItems = [{
filename: "Besabriyaan",
path: "videos/Besabriyaan.mp4"
}, {
filename: "Parwah nahin",
path: "videos/Parwah nahin.mp4"
}, {
filename: "Laila main laila",
path: "videos/Laila main laila.mp4"
}, {
filename: "Kaabil trailer",
path: "videos/Kaabil trailer.mp4"
}];
var list = document.createElement("ul");
list.setAttribute("id", "song lists");
document.body.appendChild(list);
var li, a, filename;
for (var i = 0; i < listItems.length; i++) {
li = document.createElement("li");
a = document.createElement("a");
a.setAttribute("id", "movie_" +i);
a.setAttribute("href", listItems[i].path);
filename = document.createTextNode(listItems[i].filename);
a.appendChild(filename);
li.appendChild(a);
list.appendChild(li);
}
};<button onclick="generateList();">Click on me</button>关于javascript - 如何动态添加新的li标签到无序列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41918729/