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实例传递给它。

您需要从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

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++;
    }

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

2 个答案: