使用javascript对象重复html代码的最佳方法是什么?

时间:2015-04-02 12:31:44

标签: javascript html repeat

使用某些js对象,如

links = {
    link1: "Text1",
    link2: "Text2",
    link3: "Text3"
};

我想从键中创建多个带有<a>的{​​{1}}元素,并从值中创建内容,例如

href

使用js或一些流行的js框架做到最好和最短的方法是什么?

2 个答案:

答案 0 :(得分:2)

你想在javascript中使用for循环。

HTML:

 <p id="demo" />

JS:

links = {
    link1: "Text1",
    link2: "Text2",
    link3: "Text3"
};

var element, filling = "";
for (element in links) {
    filling += "<a href=\"{0}\">{1}</a>"
        .replace("{0}", element)
        .replace("{1}", links[element]);
}

document.getElementById("demo").innerHTML = filling;

请参阅此处的演示:http://jsfiddle.net/0subxy9m/1/

答案 1 :(得分:2)

以Angular为例,您的链接对象

HTML

<li ng-repeat="(link,text) in links">
    <a href="http://example.com/{{link}}">{{text}}</a>
</li>


JS

$scope.links = {
  link1: "Text1",
  link2: "Text2",
  link3: "Text3"
};

plnkr demo here