如何使用javascript创建包含链接的列表

Question

我是JavaScript的新手并尝试创建包含链接的列表。那么我们如何使用JavaScript实现它呢？假设作为列表一部分的内容可用作数组。

需要实现的是

链表

• 链接1
• 链路2

Link1和Link2是链接。

静态地在HTML页面中，可以实现如下所示

<p>LinkList</p><ul>
 <li><a href="www.google.com">Link1</a></li>
 <li><a href="www.facebook.com">Link2</a></li></ul>

如果我们将Link1和Link2作为一个数组，如何使用Javascript动态创建包含链接的列表？

Answer 1

您在上述评论中发布的内容是一个良好的开端。您不需要将链接名称添加为文本，而是需要为append元素创建一个锚元素li。

尝试以下内容。它比以前更复杂，但它也可能比其他解决方案更具可读性。

var Link = function(href, name) {
    this.href = href;
    this.name = name;
    this.generateAnchor = function() {
        return $("<a href='" + this.href + "'>" + this.name + "</a>");
    };
};


var links = [new Link("http://www.google.com", "Google"),
             new Link("http://www.yahoo.com", "Yahoo")];


for (var i = 0; i<links.length; i++) {
    var listElement = $("<li></li>").append(links[i].generateAnchor());
    $("ul.linkList").append(listElement);
}

this jsFiddle中的工作示例。

如果您有任何疑问，请与我们联系。下次请记住StackOverflow旨在帮助改进现有代码并回答研究成果的问题。您展示的工作和研究越多，我们就越有帮助。