javascript - 在构造函数中动态地将子 div 附加到其父级

Question

我在使用appendchild() 在div 中附加div 时遇到问题。如果可能的话，我想避免使用 jquery。我对父 div 和子 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 toexecute 'appendChild' on 'Node':parameter 1 is not of type 'Node'. 的错误，因为 appendChild()方法需要一个 dom 元素引用作为其参数。

在您的情况下，您将一个 codeDiv 实例传递给它。

您需要从codeDiv返回新的div

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

}

演示:Fiddle