logo标签列表

将一个Div插入另一个Div中？

javascriptjqueryhtmldommootools
10

我正在创建一个 Web 应用程序，想知道为什么以下代码不起作用。首先创建了一个元素，然后将其添加到 body 中。然后我创建了另一个 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);插入它。

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

如果我没记错的话，为了将某个东西插入到具有特定ID的DOM中，你不能直接设置它的id属性 - 你必须执行mainAppDiv.setAttribute('id', 'mainBody')。 - Sam Dufel
3个回答
9

改为：

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

Just do:

this.mainAppDiv.appendChild(this.mainCanvasDiv);

这样，您直接将mainCanvesDiv附加到mainAppDiv。 如果您已经有一个元素的引用，则不需要使用getElementById。

4

做法如下：

this.mainAppDiv.appendChild(this.mainCanvasDiv);
this.mainCanvasDiv.id 不是对画布元素的引用，而是它的字符串ID。 - meouw
1
为什么你使用MooTools，却又回归到原生的JavaScript？
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);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接