如何加入對象數組中的JavaScript，然後插入到HTML元素

Question

http://jsfiddle.net/Mw22G/2/

var link1 = '<a href="/path/file.html">Link'+i+'</a>'; 

    var link2 = document.createElement("a"); 
    var linkText = document.createTextNode("Link"+i); 
    link2.appendChild(linkText); 
    link2.setAttribute('href','/path/file.html'); 

字符串環節制定了預期，現在我要實現對象鏈接相同的結果。 目標是動態地用一組鏈接填充一個變量，並在一個步驟中添加整個事件而不會在循環中困擾DOM。

Answer 1

不太清楚，如果我完全明白你的問題。如果你想避免在一個循環中觸摸DOM，createDocumentFragment（）是要走的路。

var links = [ 
    { 
    text: 'link 1', 
    href: '/path/file1.html' 
    }, 
    { 
    text: 'link 2', 
    href: '/path/file2.html' 
    } 
]; 

var frag = document.createDocumentFragment(); 

for (var i = 0, len = links.length, a, l; i < len; i++) { 
    l = links[i]; 
    a = document.createElement('a'); 
    a.href = l.href; 
    a.innerText = l.text; 
    frag.appendChild(a); 
} 

document.body.appendChild(frag); 

Answer 2

，如果你這樣做：

arrLink2.push(link2.outerHTML); 

這會給你同樣的輸出爲arrLink1一樣。兩個數組中的值都是相同的。

如果您不需要擔心IE 8（或您使用填充工具），你可以使用reduce代替join：

var Link2Res = arrLink2.reduce(function (previousValue, currentValue, index/*, array */) { 
    return previousValue + (index > 0 ? '<br>' : '') + currentValue.outerHTML; 
}, '');