javascript-DOM修改瘋狂

Question

我有這個函數，我想創建一個帶有兩個子div的容器div，一個是容器的標題，另一個是內容。出於某種原因，當我在jsfiddle中測試時，這不起作用。

此外，我想知道如何將這個整個容器追加到具有在我的HTML特定類的div。

var add = function(title, content) { 
 
    var addContainerBody = document.createElement("DIV"); 
 
    addContainerBody.className = "c-body"; 
 
    var addTitle = document.createElement("DIV"); 
 
    var titleText = document.createTextNode(title); 
 
    addTitle.appendChild(titleText); 
 
    addTitle.className = "title"; 
 
    var addContent = document.createElement("DIV"); 
 
    var contentText = document.createTextNode(content); 
 
    addContent.className = "content"; 
 
    addContainerBody.appendChild(addTitle); 
 
    addContainerBody.appendChild(addContent); 
 
    document.body.appendChild(addContainerBody); 
 
}; 
 

 
// Callin it // 
 

 
add("Title","Text");

正如你所看到的，它輸出只有標題，沒有別的。我可能錯過了一些非常明顯的東西。這裏有什麼問題？

Answer 1

我可能錯過了一些非常明顯的東西。

您永遠不會將contentText附加到addContent元素。

function add(title, content) { 
 
    var addContainerBody = document.createElement("DIV"); 
 
    addContainerBody.className = "c-body"; 
 

 
    var addTitle = addContainerBody.appendChild(document.createElement("DIV")); 
 
    addTitle.className = "title"; 
 
    addTitle.appendChild(document.createTextNode(title)); 
 

 
    var addContent = addContainerBody.appendChild(document.createElement("DIV")); 
 
    addContent.className = "content"; 
 
    addContent.appendChild(document.createTextNode(content)); 
 

 
    document.body.appendChild(addContainerBody); 
 
} 
 

 
add("Title","Text");

我想知道如何這整個容器附加到一個div在我的HTML一個特定的類。

您可以使用document.getElementsByClassName或document.querySelector以獲取與類的DIV，然後追加到它，而不是document.body。但請確保在執行代碼之前選擇that the element is already available。