javascript - 使用循环创建新的 div，在每个新的 div 上附加子节点

Question

我正在为我的一门类(class)做作业，我需要以下方面的帮助:

使用 Javascript，我必须在 JSON 对象中为每本书创建 div(总共 50 本书，下面是一本示例)，并将每本书的图像、标题和描述放入新创建的 div 中。

以下是对象中的一本书的示例:

var itunesResponse = {
  "results": [
    {
      "fileSizeBytes": 468847,
      "artistViewUrl": "https:\/\/itunes.apple.com\/us\/artist\/brad-land\/5526375?mt=11&uo=4",
      "trackCensoredName": "Goat",
      "trackViewUrl": "https:\/\/itunes.apple.com\/us\/book\/goat\/id420798692?mt=11&uo=4",
      "artworkUrl60": "http:\/\/is4.mzstatic.com\/image\/thumb\/Publication18\/v4\/1c\/48\/62\/1c4862bd-1a5d-0a7c-7143-2878aed682f8\/source\/60x60bb.jpg",
      "artworkUrl100": "http:\/\/is4.mzstatic.com\/image\/thumb\/Publication18\/v4\/1c\/48\/62\/1c4862bd-1a5d-0a7c-7143-2878aed682f8\/source\/100x100bb.jpg",
      "currency": "USD",
      "artistId": 5526375,
      "artistName": "Brad Land",
      "genres": [
        "Biographies & Memoirs",
        "Books",
        "Professional & Technical",
        "Education",
        "Nonfiction",
        "Social Science"
      ],
      "kind": "ebook",
      "price": 9.99,
      "description": "<b>Soon to be a major motion picture starring Nick Jonas, this&#xa0;searing memoir of fraternity culture and the perils of hazing&#xa0;provides an unprecedented window&#xa0;into the emotional landscape of young men.<\/b><br \/><br \/>Reeling from a terrifying assault that has left him physically injured and psychologically shattered, nineteen-year-old Brad Land must also contend with unsympathetic local police, parents who can barely discuss \u201cthe incident\u201d (as they call it), a brother riddled with guilt but unable to slow down enough for Brad to keep up, and the feeling that he\u2019ll never be normal again.<br \/><br \/>When Brad\u2019s brother enrolls at Clemson University and pledges a fraternity, Brad believes he\u2019s being left behind once and for all. Desperate to belong, he follows. What happens there\u2014in the name of \u201cbrotherhood,\u201d and with the supposed goal of forging a scholar and a gentleman from the raw materials of boyhood\u2014involves torturous late-night hazing, heartbreaking estrangement from his brother, and, finally, the death of a fellow pledge. Ultimately, Brad must weigh total alienation from his newfound community against accepting a form of brutality he already knows too well.<br \/><br \/><i>From the Hardcover edition.<\/i>",
      "formattedPrice": "$9.99",
      "artistIds": [
        5526375
      ],
      "genreIds": [
        "9008",
        "38",
        "9029",
        "10037",
        "9002",
        "10120"
      ],
      "releaseDate": "2004-02-03T08:00:00Z",
      "trackId": 420798692,
      "trackName": "Goat",
      "userRatingCount": 16,
      "averageUserRating": 3.5
    }
  ]
}

我计划使用循环创建所有内容，但每次我尝试通过循环将标题(标题)附加到新的 div 中时，所有内容都会最终出现在最后创建的 div 中。

我最近尝试的代码:

let body = document.getElementById('wrapper');
let newImg = document.createElement('img');
let newTit = document.createElement('h3');
let newDes = document.createElement('p');
        for(i=0; i<itunesResponse.results.length; i++ ){
            let newDiv = document.createElement('div');
            body.appendChild(newDiv);
            newDiv.appendChild(newTit);
            newDiv.style.color = 'rgb(100,100,100)';
            let titVal = document.createTextNode(itunesResponse.results[i].trackName);
            newTit.appendChild(titVal);
        }

Answer 1

您需要将新的 div 附加到 DOM 并将新标题的创建移至循环内部。

let body = document.getElementById('wrapper');

for (let i = 0; i < itunesResponse.results.length; i++) {
    let newDiv = document.createElement('div');
    newDiv.style.color = 'rgb(100,100,100)';
    body.appendChild(newDiv);

    let newTit = document.createElement('h3');
    newDiv.appendChild(newTit);

    let titVal = document.createTextNode(itunesResponse.results[i].trackName);
    newTit.appendChild(titVal);
}