DIV mit JS erzeugen

[Marius]

Hallo,
ich würde gerne einen Div mit Hilfe von JS erzeugen, habe jedoch keine Ahnung wie es funktionieren könnte.
Wenn ich folgendes benutze:

...

var newDiv = document.createElement("div");
document.getElementById("middle").appendChild(newDiv);

...

Dann bekomme ich nur folgendes: <div/>

Ich möchte aber so etw. bekommen: <div></div>
Zudem möchte ich dann eine ID und Class dem DIV geben, Höhe und etc. bestimmen und den Inhalt erzeugen.

Wie schaffe ich das?

Freue mich schon auf die Antwort,
mit freundlichen Grüßen Marius

[Kai345]

[latex]Moin![/latex]

var newDiv = document.createElement("div");
document.getElementById("middle").appendChild(newDiv);

Dann bekomme ich nur folgendes: <div/>

Ich möchte aber so etw. bekommen: <div></div>

Dein div hat ja noch keinen Inhalt, ob die Anzeige eines leeren div als <div/> jetzt eine Eigenheit deines Browsers oder so festgelegt ist, weiß ich gerade nicht.

Zudem möchte ich dann eine ID und Class dem DIV geben, Höhe und etc. bestimmen und den Inhalt erzeugen.

Wie schaffe ich das?

newDiv.id = "bla";  
newDiv.className = "meine_klasse";

für CSS-Angaben wie höhe etc wird das style-Objekt benutzt.
Besonders zu beachten sind die geänderten Schreibweisen von CSS-Eigenschaften.

Cü,

Kai

[Marius]

Vielen Dank für die schnelle Antwort,
nur wie kann ich nun den Inhalt dieses Divs abändern, bzw. erzeugen?
Gruß Delfried

[Snafu]

Hallo!

Vielen Dank für die schnelle Antwort,
nur wie kann ich nun den Inhalt dieses Divs abändern, bzw. erzeugen?

Schön über createElement() und appendChild(), so wie du das DIV Element zum Body oder was auch immer hinzugefügt hast.
Weniger schön über deinElement.innerHTML = "blaslkfaslfksl";

[Kai345]

[latex]Moin![/latex]

nur wie kann ich nun den Inhalt dieses Divs abändern, bzw. erzeugen?
Schön über createElement() und appendChild(), so wie du das DIV Element zum Body oder was auch immer hinzugefügt hast.

... oder über createTextNode, wenn es kein weiteres Element sondern nur einfacher Text ist ;-P

Weniger schön über deinElement.innerHTML = "blaslkfaslfksl";

Cybaer wird dir jetzt bestimmt widersprechen ;) innerhtml ist eigentlich gut unterstützt und auch recht schnell, allerdings finde _ich_ das Zusammenbasteln von Strings absolut unerträglich, sobald Variablen eingefügt werden sollen und/oder Attribute für Elemente definiert werden. Da wird dann mit " ' \" und \'  gebastelt und man muß aufpassen, daß man es nicht versaut:

element.innerhtml = "<form id='"+formid+"' action='http://www.laber.suelz/in.php?intern="+laber+"'>"

fo = document.createElement("form");  
fo.id = formid;  
fo.action = "http://www.laber.suelz/in.php?intern="+laber;  
element.appendChild(fo);  

Die zweite Lösung ist mehr Schreibarbeit und auch nicht so schnell, aber dafür ist auch sofort ersichtlich, was passiert, während man bei innerhtml erst mal auseinanderbasteln muß, was nun String, Variable und Attributwert ist

Ich persönlich schreibe es ja noch wieder anders, aber das ist etwas spezielles ;)

(für den Threadersteller)

Cü,

Kai

[Marius]

Danke für die Arbeiten...
von innerhtml habe ihc shcon mal gehört, und mir wurde gesagt es sei keine gute Lösung, also werde ich es mit appendChild machen.
Vielen Dank für die Hilfe, ich werde eh nicht so viel anzeigen lassen (Bild + Beschreibung)
Mfg, Marius

[D.R.]

Hallo,

nur wie kann ich nun den Inhalt dieses Divs abändern, bzw. erzeugen?

Das funktioniert genau so, wie du auch das <div> in den Elementbaum eingefügt hast.

z.B.:

deindiv.appendChild(neuesElement); //„neuesElement“ ist ein DOM-Knoten, der zuvor mit document.createElement() oder document.createTextNode() erzeugt werden muss.

siehe: http://de.selfhtml.org/javascript/objekte/node.htm

mfg. Daniel

[D.R.]

Hallo,

Dann bekomme ich nur folgendes: <div/>

Ich möchte aber so etw. bekommen: <div></div>

Nö, du bekommst einen DOM-Elementknoten und hängst ihn in den Elementbaum ein. Erst wenn du ihn als (X)HTML ausgeben lässt, kommt es zu einer dieser Darstellungen.

Warum stellt das ein ein Problem dar?

mfg. Daniel