nicht angemeldet
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