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。