Javascript 将循环内迭代附加到html

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

我的问题是，如果我有三个数组包含我的值，比如书名、作者和URL——我将如何附加它们，使它们显示如下？而不是在所有值的三个单独列表中

Book Title
Author
URL

Book Title 
Author 
URL

您始终可以创建一个：

var数据=['1'，'2'，'3'，'4']；
//创建空片段
var fragment=document.createDocumentFragment（）；
//将项目附加到片段的我的迭代
对于（变量i=0；i

如果三个数组的长度相同：

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)

var titles=['Title 1'、'Title 2'、'Title 3']，
作者=[“作者1”、“作者2”、“作者3”]，
URL=['URL 1'，'URL 2'，'URL 3']，
fragment=document.createDocumentFragment（）；
对于（变量i=0，len=titles.length；i

为什么不创建一个列表并从json中逐个添加项目。您能告诉我们您现在得到了什么吗？你能展示for循环吗？这是我想做的，但我不知道怎么做。我可以制作三个单独的列表，即书名列表、作者列表和URL列表，但我似乎无法让它们显示为上面的样子。谢谢你，我将尝试一下。虽然有时一本书没有URL，所以我想这会破坏它，因为数组的长度不同。是的，但是你的数组有一个普遍的问题。如果URL数组中缺少该位置，则不知道该URL属于下一本书。您应该在URL数组中用

null

填充这些缺失的URL。你知道我的意思吗？是的，这很有意义，我会调整我的代码，以便在JSON值为空时向数组添加null。好的，我更改了代码。现在，它将只显示URL，如果它可用（非空）。

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)