我需要在dom div中添加第三個appendchild（）

Question

我的目標是讓appendChild（detail）出現在appendChild（image）之後，但它不會顯示在瀏覽器中。

document.getElementById("myBtn2").addEventListener("click", hey); 

function hey(){  
    for (i = 1; i < radio.length; i++){ 
     f = radio[i].image ; 

     var item = document.createElement('div'); 
     item.id = "box"; 
     item.className = "dell"; 
     item.style.height = "140px"; 
     detail = document.createElement('div'); 
     detail.className = "space"; 
     image = document.createElement('img'); 
     image.id = "pic"; 
     image.className = "dell3"; 
     image.setAttribute("src", f); 

     document.getElementById('case').appendChild(item).appendChild(image).appendChild(detail);         
    } 
} 

Answer 1

appendChild()返回附加節點。它不是可鏈接的您認爲的方式。在您的代碼中，item附加到'case',image到item和detail到image。由於image是不應該有子女的<img>元素，因此不會顯示detail。

解決方法是將每個項目分別追加到文檔片段，然後將文檔碎片附加到案例。

var frag = document.createDocumentFragment(); 
var item = frag.appendChild(document.createElement('div')); 
item.id = "box"; 
item.className = "dell"; 
item.style.height = "140px"; 
var detail = frag.appendChild(document.createElement('div')); 
detail.className = "space"; 
var image = frag.appendChild(document.createElement('img')); 
image.id = "pic"; 
image.className = "dell3"; 
image.setAttribute("src", f); 

document.getElementById('case').appendChild(frag); 

注意你可能要在其他變量賦值VAR關鍵字太否則你將創建爲每一個隱含的全局變量。我已經將這些添加到了我所做的示例更改中。還有其他的優化可能也需要做，比如每次循環時都不要執行document.getElementById()查找（可以將它作爲var存儲在循環之外）。