어떻게 자바 스크립트에서 객체의 배열을 가입하고

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'); 

문자열 링크가 예상대로 지금은 오브젝트 링크에 ​​대한 동일한 결과를 달성하고자 밖으로 일 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

이 작업을 수행 할 경우 : arrLink1가하는 당신에게 동일한 출력을 줄 것이다

arrLink2.push(link2.outerHTML); 

. 두 배열의 값은 같습니다.

당신이 IE 8에 대해 걱정할 필요가없는 경우

(또는 당신이 polyfill 사용), 당신은 reduce 대신 join를 사용할 수 있습니다

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