如何将新的 li 标签动态添加到无序列表中

我想创建一个包含我的视频的列表。我尽力了，但它不起作用。下面是我的代码。

我的代码有问题吗？

<!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，这些变量将在下一次迭代中被覆盖。
您的代码中没有列表项对象，它是列表项

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>

相关内容

最新更新

热门标签：