Question

因此，我有一个函数可以在“ content” div中创建一个名为“ musiccard”的div，然后将其提取JSON数据并将其用于音乐数据。就目前而言，目前所有内容都位于content div中，我想知道将其移动到同时提取数据的音乐卡中的最佳方法。

这是我的js文件：

var content = document.getElementById("content");


document.addEventListener("DOMContentLoaded", function() {
  init();
  title();
  headerDescription();
});


 function init() {
  loadJSON(function(response) {
     var json = JSON.parse(response);
     var count = Object.keys(json.musics).length;
     for(var i=0; i<count; i++){

      var div = document.createElement("div");
       div.setAttribute("class", "musiccard");
       content.appendChild(div);

      var h3 = document.createElement("h3");
      h3.textContent = json.musics[i].title;
      content.appendChild(h3);

      var p = document.createElement("p");
      p.setAttribute("class", "albumruntime");
      p.innerHTML = 'Run Time:' + json.musics[i].running_time + 'min';
      content.appendChild(p);

      var p = document.createElement("p");
      p.setAttribute("class", "musicdescription");
      p.innerHTML = json.musics[i].description;
      content.appendChild(p);

       var img = document.createElement("img");
       img.src = json.musics[i].url;
       img.setAttribute("class", "albumart");
       content.appendChild(img);
     }
  });
 }

Answer 1

类似于将新的musiccard添加到content元素的方式，您可以将所有这些新元素添加到musiccard元素中，而不是之前到content。

您可以按照以下步骤操作：

1）抓住content元素。

2）创建一个document fragment。如果要在循环中添加更新元素，这将很有用。无需将所有元素都添加到DOM中，而是将它们添加到片段中，并在循环完成后将单个片段添加到DOM中。效率更高。

3）创建musiccard元素，并将所有其他新元素添加到其中。

4）在循环结束时，将musiccard添加到片段

5）将所有musiccard添加到片段后，将片段添加到content。

注意：JSON是服务器返回的内容。解析后，它不再是JSON。我将您的json变量重命名为data，因此更有意义。我还将div重命名为musiccard，因此代码更易于遵循。

function loaddata(callback) {
  const json = '{"musics": [{"title": "title1", "running_time": 10, "description": "Note1", "url": "http://bob.com" }]}';
  callback(json);
}

function init() {
  loaddata(function(response) {

    var data = JSON.parse(response);

    var count = Object.keys(data.musics).length;
    
    // grab the content div
    var content = document.getElementById('content');

    // create the fragment
    var frag = document.createDocumentFragment();

    for (var i = 0; i < count; i++) {

      var musiccard = document.createElement("div");
      musiccard.setAttribute("class", "musiccard");

      var h3 = document.createElement("h3");
      h3.textContent = data.musics[i].title;
      
      // add the title to musiccard
      musiccard.appendChild(h3);

      var p = document.createElement("p");
      p.setAttribute("class", "albumruntime");
      p.innerHTML = 'Run Time:' + data.musics[i].running_time + 'min';
      
      // add runtime to musiccard
      musiccard.appendChild(p);

      var p = document.createElement("p");
      p.setAttribute("class", "musicdescription");
      p.innerHTML = data.musics[i].description;
      
      // add description to musiccard
      musiccard.appendChild(p);

      var img = document.createElement("img");
      img.src = data.musics[i].url;
      img.setAttribute("class", "albumart");

      // add img to musiccard
      musiccard.appendChild(img);

      // add completed musiccard to the fragment
      frag.appendChild(musiccard);

    }

    // add the fragment containing all the musiccards
    // to the content div
    content.appendChild(frag);

  });

}

init();

<div id="content"></div>

Answer 2

请记住，在提取数据的同时创建音乐卡div本质上是同步的。您想使用异步函数来获得所需的结果，一旦从json文件中提取数据完成，就调用创建div的函数。

您也许可以创建一个Promise，该Promise提取数据，然后返回音乐卡div，并在其中显示数据，然后将结果（收到的响应）传递给then（）回调。

这是一篇有关使用Promises的非常有益的文章：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

将JS中创建的元素移动到JS中创建的另一个元素

2 个答案: