create Element

[Conkuist]

Hallo

Wie kann ich ein div in ein einem div einfügen?

Hier Links zu jsFiddle

Hier der Code
http://jsfiddle.net/AP2U4/27/

Hier zum Anschauen
http://jsfiddle.net/AP2U4/27/show/

Danke

 

[Tronjer]

Der Code macht doch, was du ihm sagst.

 

[Conkuist]

nicht ganz
ich will in dem eingefügten div ein weiteres div einfügen
leider habe ich keine idee wie

 

[Tronjer]

In dem Fall musst du das Div nicht in #rahmen einfügen, sondern in das 'tiefste' Child mit der Klasse .element. Um das Child zu finden, kannst du dir entweder in Vanilla JS eine Schleife bauen und über die Nodes traversieren, oder machst es dir einfach und nimmst jQuery. append() zum Anhängen der Elemente, find(':last') zum Traversieren.

Mal angenommen, die Struktur sähe so aus:

<div class="box"></div>
  <div class="element">
    Foo
    <div class="element">
      Bar
      <div class="element">
        Foobar
      </div>
    </div>
  </div>
</div>

Dann lässt sich so das innerHTML des 'tiefsten' div.element finden:

var txt = $('.element').find(':last').html();
console.log(txt); //Foobar

 

[Conkuist]

Mit JQuery hab ich eigentlich noch so gut wie keine Erfahrung
Würde es daher eher mit Javascript machen
Hab leider keine Ahnung was du mit traversieren meinst
Vielleich kannst du mir ja noch ein kleines Javascript Beispiel schreiben
Das wäre sehr hilfreich

Habs bis jetzt nur geschafft den div auch oben einzufügen
hier der Code
http://jsfiddle.net/AP2U4/30/

 

[Tronjer]

Mit Vanilla JS ist das wesentlich komplexer, weil du dazu die Nodes durch eine Schleife schieben musst. Wenn du es tatsächlich so machen willst, finden sich auf stackoverflow genügend Beispiele. Ich selber traversiere immer mit jQuery. Weil sich damit über mehrere Ebenen springen lässt.

Traversieren bedeutet, im DOM Baum zu navigieren. Jeder Node kann Parents, Children und Siblings haben. In deinem Fall heißt das: Suche von der aktuellen Position aus den am weitesten entfernen Anchestor der die Klasse .element besitzt.

 

[Gelöschtes Mitglied 3007]

Mit diesem Code kannst du dein Ziel ganz einfach erreichen.

var c = document.getElementById("counter");
var e = document.getElementsByClassName("element");
var r = document.getElementById("rahmen");
c.innerHTML = e.length + " Elemente";

var last = r;

document.getElementById("neu").onclick = function () {
    if (e.length >= 7) { return }
    var box = document.createElement("div");
    box.className = "element";
    last.appendChild(box);
    last = box;
    c.innerHTML = e.length + " Elemente";
};

Alles was du brauchtest war eine Variable, welche die Ebene speichert in die das nächste Element eingefügt werden soll. Hier "last" genannt. Ich kann mir zwar nicht vorstellen für was du das brauchst aber so bekommst du es ohne Probleme hin.

Ps: Von wegen schleifen Tronjer :-D :-D