Question

我正在加载json数据并在div内的网站上显示它们。

我决定使用

将数据存储在htmlfragment中

var docFragment = new DocumentFragment();
function createFullList(){
   var aside       = document.getElementsByClassName("one")[0];
   for( x in obj ){
      createInfoElement( docFragment , obj[x].general , obj[x].job );
   }
   var div = document.createElement("div");
   div.appendChild(docFragment);
   aside.innerHTML += div;
}

crateInfoElement只是创建div并将其附加到docFragment。令我不安的是，当我想将documentFragment附加到其所谓的持有者（旁边的变量）时。它不会显示其中的所有div而不仅仅是

[object HTMLDivElement]

我对片段没有太多经验，但是使用MDN中的示例

var ul = document.getElementsByTagName("ul")[0]; // assuming it exists
var docfrag = document.createDocumentFragment();
var browserList = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"];

browserList.forEach(function(e) {
  var li = document.createElement("li");
  li.textContent = e;
  docfrag.appendChild(li);
});

ul.appendChild(docfrag);

它确实在其中显示了ul和li元素，而不仅仅是

[object HTMLDivElement]

就像我的情况一样。是什么导致了这种行为？

createInfoElement看起来像这样

function createInfoElement( parent , name , job ){
   var div = document.createElement("div");
   div.setAttribute("class","left_info");

   var p  = document.createElement("p");
       p.setAttribute("class","name");
       p.innerHTML = name.firstName + " " + name.lasName;

   var p_two = document.createElement("p");
       p_two.setAttribute("class","job");
       p_two.innerHTML = job.title;

   div.appendChild(p);
   div.appendChild(p_two);
   parent.appendChild(div);
}

将htmlfragment附加到元素

0 个答案: