createElement() - Html Teil mit js erstellen, wie?

  • Hy


    Habe folgendes problem, möchte einen Teil in js erstellen lassen (denke wäre sinvoll) Nur kein plan wie man ein erstelltest element weitere element darunter hinzufügt. div Id=" valueStats" steht im html code bereit.


    Hier der Html code:

    Hier mein js:

    Geht das so in die richtige richtung oder lauf ich da gegen was an?

    (Internet spuckt nix aus, ausßer createElement(), creatDocumentFragment(), )

    Bitte um tipps.


    Mfg.


    PS. Frohe Ostern! :D

  • Ebenfalls frohe Ostern!

    Ich habe es nicht getestet, aber ich denke, Du bist da schon auf dem richtigen Weg. Du musst dann nur das htmlFragment noch dem Container hinzu fügen.

    DocumentFragment hat schon Vorteile, aber wenn Du ein einziges Element erzeugen und hinzu fügen willst, geht es wahrscheinlich auch ohne.

  • Ich möchte schön mehrere elemente erzeugen, deswegen mit DocumentFragment. Problem ist wenn ich schon ein div erzeuge, möchte ich ein div ins das erste div erzeugen. Muss ich es mir mit getElementById(....) holen? Oder kann ich in das erzeugte div ein weiteres div erzeugen? Wenn ja wie? Aussehen sollte es so:

    Html:

    <div id="valueStatus"></div> steht schon im Html, mit createElement füge ich 4x div hinzu +class, id. Und zu jeden div möchte ich weitere kind elemente <div> erzeugen. Wie kann ich sie hinzufügen? Kann ich sie hinzufügen wenn er das erste div erzeugt (+2 kindelemente), usw.bis zum <li>...</li>? (dadurch erzeuge ich mehrere elemente, deshalbt createDocumentFragment()). Ich weis halt nicht wie ich bei einem erzeugten div ein weiter div (kindelement) hinzufügen kann. Bin da selbst ziemlich confused.

  • Zitat

    Ich möchte schön mehrere elemente erzeugen, deswegen mit DocumentFragment.

    Das ist natürlich ein Grund und dann ist es auch angebracht.


    Zitat

    möchte ich ein div ins das erste div erzeugen. Muss ich es mir mit getElementById(....) holen?

    Wenn ich das richtig verstehe, hast Du das Div ja als Javascript-Objekt und dann kannst Du das neue auch dort einfügen. In etwa so:

  • Funktioniert "glaub ich" genau so wie es soll, kann es nicht richtig überprüfen, beim log läufts verkehr die ausgabe. Nach dem ich bis zum element <li> gekommen bin, sehe ich ob ich alles richig gemacht habe.

    Ich denke das ich es in etwas verstanden habe die schreibweise und mit appendChild(). Wenn ich fertig bin werde ich meinen Code hier posten.


    thx

  • Habe jetzt einmal geschafft die Rohform, sieht glaub ich gut aus.

    html:

    Code
    <div id="valueStats"></div>

    js:

    Habe erst etwas spät gemerkt das ich ja noch span drinen habe :$. Werde jetzt noch den code besser formatieren. Und dann weiter mit dem span anfangen.

    Kurzes feedback zum code wäre super. Was gut gemacht ist und was schlecht gemacht ist (Bin noch Anfänger!) Verbesserungen vorschläge, tipps, etc. erwünscht. (damit ich mir neues aneignen kann)


    Mfg.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!