Einfügen eines Div In ein anderes Div?

Im erstellen einer web-app und würde gerne wissen, warum der folgende code nicht funktioniert. Es erstellt zunächst ein element, welches dann dem body-Tag Hinzugefügt. Ich habe dann erstellen Sie ein weiteres Div-element, das ich möchte, um Platz innerhalb des ersten div-element, das ich erstellt.

Im mit MooTools-Klassen zum erstellen und initialisieren Objekte, und es funktioniert gut, aber ich einfach nicht scheinen, um Holen Sie sich den folgenden code, um zu arbeiten. Der code ist innerhalb einesinitialize: function() einer Klasse:

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

Wie Sie sehen können, erstellt es zunächst einen div namens "mainBody" und dann fügt er das Dokument.Körper, Diesen Teil funktioniert der code einwandfrei. Das problem kommt dann beim erstellen der zweiten div und versuchen zu legen, dass die Verwendungdocument.getElementById(this.mainAppDiv.id).i(this.mainCanvasDiv.id);

Kann jemand denken, ein Grund, warum der obige code funktioniert nicht?

  • Wenn ich mich richtig erinnere, um etwas einfügen in den DOM mit einer bestimmten ID, man kann nicht einfach setzen Sie seine Eigenschaft id direkt, wie, die Sie zu tun haben, eine mainAppDiv.setAttribute('id', 'mainBody')
InformationsquelleAutor Michael Smith | 2011-04-02
  1. 8

    Statt:

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

    Nur:

    this.mainAppDiv.appendChild(this.mainCanvasDiv);

    Diese Weise sind, indem der mainCanvesDiv direkt an der mainAppDiv. Es gibt keine müssen getElementById wenn Sie bereits eine Referenz auf ein element.

    InformationsquelleAutor Oded
  2. 4

    Tun Sie dies:

    this.mainAppDiv.appendChild(this.mainCanvasDiv);
    • this.mainCanvasDiv.id ist nicht eine Referenz auf ein canvas-element, sondern auch die string-id
    • ja du hast Recht, mein schlechtes. Behoben.
    InformationsquelleAutor Alex Rashkov
  3. 0

    warum benutzt du mootools doch wieder 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);
    InformationsquelleAutor Dimitar Christoff
Schreibe einen Kommentar