javascript - 如何在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

如果你这样做：

arrLink2.push(link2.outerHTML);

这将为您提供与此相同的输出arrLink1。两个数组中的值将相同。

如果你不需要担心 IE 8（或者你使用 polyfill），你可以使用reduce代替join：

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

Answer 2

不太确定我是否完全理解你的问题。如果您想避免在循环中接触 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);