什麼是使用javascript對象重複html代碼的最佳方式？

Question

使用一些JS對象像

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

我想創建鍵和值的內容與href幾個<a>元素，如

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

什麼是最好的，用做它的最短路徑JS或一些流行的JS框架？

Answer 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/

Answer 2

與角例如，你的鏈接對象

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