將JS中創建的元素移動到JS中創建的另一個元素

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元素的方式類似，可以在將其添加到content 之前，將所有這些新元素添加到musiccard元素。

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

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