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.
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:
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);
Can anyone think of a reason the above code does not work?
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.
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:
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);
Can anyone think of a reason the above code does not work?
Share Improve this question asked Apr 2, 2011 at 19:00 Michael SmithMichael Smith 1011 gold badge1 silver badge3 bronze badges 1 |3 Answers
Reset to default 9Instead of:
document.getElementById(this.mainAppDiv.id).appendChild(this.mainCanvasDiv.id);
Just do:
this.mainAppDiv.appendChild(this.mainCanvasDiv);
This way you are appending the mainCanvesDiv directly to the mainAppDiv. There is no need to getElementById if you already have a reference to an element.
Do like this:
this.mainAppDiv.appendChild(this.mainCanvasDiv);
why do you use mootools yet revert to 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);
mainAppDiv.setAttribute('id', 'mainBody')– Sam Dufel Commented Apr 2, 2011 at 19:07