Insertar una div en otra div?

Im creando una aplicación web y me gustaría saber por qué el siguiente código no funciona. Primero crea un elemento que luego se agrega al cuerpo. Luego creo otro elemento Div que me gustaría colocar dentro del primer elemento div que creé.Insertar una div en otra div?

Im utilizando clases de MooTools para crear e inicializar objetos y funciona bien, pero parece que no puedo conseguir el siguiente código para funcionar. El código está dentro de un initialize: function() de una clase:

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);

Como se puede ver en primer lugar crea un div llamado "mainBody" y luego añade que el document.body, Esta parte del código funciona bien. El problema viene luego de crear el segundo div e intentar insertarlo usando document.getElementById(this.mainAppDiv.id).i(this.mainCanvasDiv.id);

¿Alguien puede pensar en un motivo por el que el código anterior no funciona?

Fuente

2011-04-02 Michael Smith

Si no recuerdo mal, con el fin de insertar algo en el DOM con una cierta identificación, puede no sólo establezca su propiedad ID directamente de esa manera - que tiene que hacer un 'mainAppDiv.setAttribute ('id' , 'mainBody') ' –

En lugar de:

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

Just Do:

this.mainAppDiv.appendChild(this.mainCanvasDiv);

esta manera usted está añadiendo el mainCanvesDiv directamente a la mainAppDiv. No es necesario que getElementById si ya tiene una referencia a un elemento.

Fuente

2011-04-02 19:02:42 Oded

hacer como esto:

this.mainAppDiv.appendChild(this.mainCanvasDiv);

Fuente

2011-04-02 19:04:52 infinity

' this.mainCanvasDiv.id' no es una referencia a un elemento canvas sino su cadena id – meouw

@meouw sí, tienes razón, mi mal. Fijo. – infinity

¿por qué se utiliza mootools sin embargo, vuelven a js vainilla?

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);

Fuente

2011-04-03 11:16:35

Insertar una div en otra div?

Respuesta

Cuestiones relacionadas