Добавление дочернего div в родительский элемент динамически в конструкторе

Question

У меня возникли проблемы с использованием appendchild() для добавления div в div. Если возможно, я бы хотел избежать использования jquery. Я использую функции конструктора для родительского и дочернего div.

<script> 

    var loopi = 0; 


    function codeDiv(){ 
     codeDiv1 = document.createElement("div"); 
     codeDiv1.style.height = "100px"; 
     codeDiv1.style.width = "200px"; 
     codeDiv1.style.border = "thick solid black"; 

    } 

    function functionObject(){ 
     var functionDivObject = document.createElement("div"); 
     functionDivObject.style.width = "500px"; 
     functionDivObject.style.height = "500px"; 
     functionDivObject.style.border = "thick solid black"; 
     document.body.appendChild(functionDivObject); 
     var codeDiv1 = new codeDiv(); 
     functionDivObject.appendChild(codeDiv1); //I am having the problem here 
     functionDivObject.id = "functionDiv"+loopi; 
     loopi++; 
    } 
    loopi = 0; 


    var temp = new functionObject(); 

</script> 

Answer 1

Консоль браузер должен иметь ошибку как Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'., так как метод appendChild() нужен опорный элемент DOM в качестве аргумента.

В вашем случае вы передаете экземпляр codeDiv.

Вы должны вернуть новый DIV от codeDiv

function codeDiv() { 
    var codeDiv1 = document.createElement("div"); 
    codeDiv1.style.height = "100px"; 
    codeDiv1.style.width = "200px"; 
    codeDiv1.style.border = "thick solid black"; 
    return codeDiv1; 

} 

Demo: Fiddle

Answer 2

function codeDiv() { 
    var codeDiv1 = document.createElement("div"); 
    codeDiv1.style.height = "100px"; 
    codeDiv1.style.width = "200px"; 
    codeDiv1.style.border = "thick solid black"; 
    return codeDiv1; 

} 

    function functionObject(){ 
     var functionDivObject = document.createElement("div"); 
     functionDivObject.style.width = "500px"; 
     functionDivObject.style.height = "500px"; 
     functionDivObject.style.border = "thick solid black"; 
     document.body.appendChild(functionDivObject); 
     var codeDiv1 = codeDiv(); // call function which is returning div node 
     functionDivObject.appendChild(codeDiv1); //I am having the problem here 
     functionDivObject.id = "functionDiv"+loopi; 
     loopi++; 
    }