Javascript 将一个 Div 插入另一个 Div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5525211/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Inserting a Div Into another Div?
提问by Michael Smith
Im creating a web app and would like to know why the following code is not working. It first creates a element which is then added to the body. I then create another Div element which i would like to place inside the first div element that i created.
我正在创建一个网络应用程序并想知道为什么以下代码不起作用。它首先创建一个元素，然后将其添加到正文中。然后我创建了另一个 Div 元素，我想把它放在我创建的第一个 div 元素中。
Im using MooTools classes to create and initialize objects and it works fine but i just cant seem to get the following code to work. The code is inside aninitialize: function()of a class:
我使用 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);
As you can see it first creates a div called "mainBody" and then appends it the document.body, This part of the code works fine. The problem comes from then creating the second div and trying to insert that usingdocument.getElementById(this.mainAppDiv.id).i(this.mainCanvasDiv.id);
如您所见，它首先创建了一个名为“mainBody”的 div，然后将其附加到 document.body，这部分代码工作正常。问题来自然后创建第二个 div 并尝试使用document.getElementById(this.mainAppDiv.id).i(this.mainCanvasDiv.id);
Can anyone think of a reason the above code does not work?
谁能想到上述代码不起作用的原因？
回答by Oded
Instead of:
代替：
document.getElementById(this.mainAppDiv.id).appendChild(this.mainCanvasDiv.id);
Just do:
做就是了：
this.mainAppDiv.appendChild(this.mainCanvasDiv);
This way you are appending the mainCanvesDivdirectly to the mainAppDiv. There is no need to getElementByIdif you already have a reference to an element.
这样您就可以将mainCanvesDiv直接附加到mainAppDiv. getElementById如果您已经拥有对元素的引用，则不需要。
回答by Alex Rashkov
Do like this:
这样做：
this.mainAppDiv.appendChild(this.mainCanvasDiv);
回答by Dimitar Christoff
why do you use mootools yet revert to vanilla js?
为什么你使用 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);
