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

【问题标题】：What is the best way to repeat html code using javascript object?使用 javascript 对象重复 html 代码的最佳方法是什么？
【发布时间】：2015-04-02 12:31:44
【问题描述】：

使用一些 js 对象，例如

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

我想创建几个 <a> 元素，其中 href 来自键和值的内容，例如

<a href="link1">Text1</a>
<a href="link2">Text2</a>
<a href="link3">Text3</a>

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

【问题讨论】：

标签： javascript html repeat

【解决方案1】：

你想在 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/

【讨论】：

【解决方案2】：

以 Angular 为例，您的 links 对象

HTML

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

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

plnkr demo here

【讨论】：