Question

我正在创建一个Web应用程序，并想知道为什么以下代码无效。它首先创建一个元素，然后将其添加到正文中。然后我创建另一个Div元素，我想放在我创建的第一个div元素中。

我使用MooTools类来创建和初始化对象，它工作正常，但我似乎无法使下面的代码工作。代码位于类的initialize: function()内：

this.mainAppDiv = document.createElement("div");
this.mainAppDiv.id = "mainBody";
this.mainAppDiv.style.width = "100%";
this.mainAppDiv.style.height = "80%";
this.mainAppDiv.style.border = "thin red dashed";
document.body.appendChild(this.mainAppDiv); //Inserted the div into <body>
//----------------------------------------------------//
this.mainCanvasDiv = document.createElement("div");
this.mainCanvasDiv.id = "mainCanvas";
this.mainCanvasDiv.style.width = "600px";
this.mainCanvasDiv.style.height = "400px";
this.mainCanvasDiv.style.border = "thin black solid";
document.getElementById(this.mainAppDiv.id).appendChild(this.mainCanvasDiv.id);

正如你所看到的那样，首先创建一个名为“mainBody”的div，然后将它附加到document.body，这部分代码工作正常。问题来自于创建第二个div并尝试使用document.getElementById(this.mainAppDiv.id).i(this.mainCanvasDiv.id);

插入它

有人能想到上述代码不起作用的原因吗？

Answer 1

而不是：

document.getElementById(this.mainAppDiv.id).appendChild(this.mainCanvasDiv.id);

只是做：

this.mainAppDiv.appendChild(this.mainCanvasDiv);

这样您就可以将mainCanvesDiv直接附加到mainAppDiv。如果您已经有对元素的引用，则无需getElementById。

Answer 2

这样做：

this.mainAppDiv.appendChild(this.mainCanvasDiv);

Answer 3

为什么你使用mootools还原为vanilla js？

this.mainAppDiv = new Element("div", {
    id: "mainBody",
    styles: {
        width: "100%",
        height: "80%",
        border: "thin red dashed"
    }
});

this.mainCanvasDiv = new Element("div", {
    id: "mainCanvas",
    styles: {
        width: 600,
        height: 400,
        border: "thin black solid"
    }
}).inject(this.mainAppDiv);

this.mainAppDiv.inject(document.body);

将Div插入另一个Div？

3 个答案: