Question

我有一个for循环，迭代一些JSON并为每次迭代输出三个不同的值。从我读过的内容来看，最好不要在for循环中进行追加，而是最好将值保存到数组中并附加到循环外部。

我的问题是，如果我有三个包含我的值的数组，比如书名，作者和网址 - 我将如何附加这些数据，以便它们显示如下？而不是在所有值的三个单独列表中。

Book Title
Author
URL

Book Title 
Author 
URL

Answer 1

您始终可以创建documentFragment：

var data = ['1', '2', '3', '4'];
// Create empty fragment
var fragment = document.createDocumentFragment();
// My iteration that will append items to the fragment
for ( var i = 0; i < data.length; i++ ) {
   var item = document.createElement('span');
   item.appendChild(document.createTextNode(data[i]));
   fragment.appendChild(item);
}
// After my iteration i will append my fragment 
//   to the place in the page I want my newly created items to appear. 
document.body.appendChild(fragment);

Answer 2

如果所有三个数组都具有相同的长度：

var titles = ['Title 1', 'Title 2', 'Title 3'],
    authors = ['Author 1', 'Author 2', 'Author 3'],
    urls = ['URL 1', 'URL 2', 'URL 3'],
    fragment = document.createDocumentFragment();

for (var i = 0, len = titles.length; i < len; i++) {

    var title = document.createTextNode(titles[i]),
        author = document.createTextNode(authors[i]),
        titleEl = document.createElement('h1'),
        authorEl = document.createElement('h2');

    titleEl.appendChild(title);
    authorEl.appendChild(author);

    fragment.appendChild(titleEl);
    fragment.appendChild(authorEl);

    if (urls[i]) {
        var url = document.createTextNode(urls[i]),
            urlEl = document.createElement('p');
        urlEl.appendChild(url);
        fragment.appendChild(urlEl);
    }

}

document.body.appendChild(fragment)

在循环迭代中追加到html

2 个答案: