nicht angemeldet
DIV nachträglich erstellen
Hallo,
leider finde ich zu einem Problem keine Lösung. Es soll dynamisch ein DIV-Bereich eingefügt werden:
<div class="Box">
<div class="BoxHead">
<h1>Überschrift</h1>
</div>
</div>
Irgendwie bekomme ich es mit document.createElement nicht auf die Reihe. Kennt jemand eine Lösung?
Vielen Dank und einen sonnigen Tag
-
Hallo,
Hallo,
leider finde ich zu einem Problem keine Lösung. Es soll dynamisch ein DIV-Bereich eingefügt werden:
<div class="Box">
<div class="BoxHead">
<h1>Überschrift</h1>
</div>
</div>Hallo,
Irgendwie bekomme ich es mit document.createElement nicht auf die Reihe. Kennt jemand eine Lösung?
Also eine andere Lösung als diese Fällt mir da nicht ein.
Du müsstest nur dein Code etwas umändern:
<div class="Box" id="Bereich"> <div class="BoxHead"> <h1>Überschrift</h1> </div> </div>Wenn du das neue Div hier dran hängen willst, musst du nur die ID setzen.
Dein script müsste ungefähr so aussehen:
var NeuerDiv = document.createElement("div"); //erzeugen des Elementes var Inhalt = document.createTextNode(Irgend ein Inhalt) //Das steht im Div NeuerDiv.setAttribute("id", "NameDeDiv"); //Attribut geben NeuerDiv.appendChild(Inhalt); //Inhalt anhängen //Ins dokument hängen var AlterDiv = document.getElementById('Bereich'); AlterDiv.appendChild(NeuerDiv); //Fertig !MfG. Christoph
--
Wo die Sprache aufhört, fängt die Musik an...
Selfcode: ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
Go to this -
Hallo,
leider finde ich zu einem Problem keine Lösung. Es soll dynamisch ein DIV-Bereich eingefügt werden:
<div class="Box">
<div class="BoxHead">
<h1>Überschrift</h1>
</div>
</div>Irgendwie bekomme ich es mit document.createElement nicht auf die Reihe. Kennt jemand eine Lösung?
Das sollte ohne Probleme möglich sein. Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Beschreibung der Seite</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <style type="text/css"> .Box1 { padding:1ex; background-color:#0F0; } .BoxHead { background-color:#FF0; font-family:verdana, arial, sans-serif; } </style> <script type="text/javascript"> <!-- function neuenBereichEinfuegen(posImDOM) { var myDIV1 = document.createElement("DIV"); myDIV1.className="Box1"; var myDIV2 = document.createElement("DIV"); myDIV2.className="BoxHead"; var myH1 = document.createElement("H1") myH1.appendChild(document.createTextNode("Überschrift")); myDIV2.appendChild(myH1); myDIV1.appendChild(myDIV2); document.body.insertBefore(myDIV1, posImDOM); } //--> </script> </head> <body> <h1>Überschrift</h1> <p>Textabsatz</p> <button onclick="neuenBereichEinfuegen(this)">Hier davor neuen Bereich einfügen</button> </body> </html>Die einzige offene Frage, die nach Lektüre von http://de.selfhtml.org/javascript/objekte/document.htm#create_element, http://de.selfhtml.org/javascript/objekte/node.htm#append_child und http://de.selfhtml.org/javascript/objekte/node.htm#insert_before noch auftreten könnte, ist die , warum man das Attribut class im JavaScript mit [HTMLElement].className = "className" setzt. Das ist aber erfahrungsgemäß besser als mit setAttribute() zu arbeiten.
viele Grüße
Axel
-
Hallo,
Haha ... ich war schneller xD
MfG. Christoph
--
Wo die Sprache aufhört, fängt die Musik an...
Selfcode: ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
Go to this -
Danke! Werde es probieren.
-