如何将新的li标签动态添加到无序列表
[英]How to dynamically add new li tags to an unordered list
问题描述
I want to create a list that will contain my videos. 
我想创建一个包含我的视频的列表。 I tried my best but it is not working. 我已经尽力了，但是没有用。 Below is my code. 下面是我的代码。
Is there any problem in my code? 我的代码有什么问题吗？
<!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>
1 个解决方案
解决方案1
3 已采纳 2017-01-29 07:59:03
There are few issues in you code. 您的代码中几乎没有问题。
Variables declared inside loop are declared with a index which is not correct and throwing error.
在循环内部声明的变量使用不正确的索引声明，并引发错误。 Declare you variable like var li, var a , these variables will be overwritten in the next iterations. 声明您的变量，例如var li，var a ，这些变量将在下一次迭代中被覆盖。 There is no listItem object in your code it is listItems
您的代码中没有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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.