dynamisches Erstellen von Elementen
Kev
- javascript
Hoi!
Ich will eine Funktion, der ich beim Aufruf Parameter übergebe und dann Elemente erstellt werden. Schwer zu erklären, aber hier könnt ihr das als Beispiel sehen:
<a href="#" onclick="createElement('h1', 'id', 'schrift');return false">Überschrift</a>
function createElement(Element, Eigenschaft1, Inhalt1){
var popup = document.getElementById("popup");
var ElementToCreate = document.createElement(Element);
var AttributeToCreate = document.createAttribute(Eigenschaft1);
AttributeToCreate.nodeValue = (Inhalt1);
ElementToCreate.setAttributeNode(AttributeToCreate);
popup.appendChild(ElementToCreate);
document.getElementById("schrift").innerHTML = "Hallo"; // Zum Test
}
Die Fehlerkonsole gibt überhaupt nichts aus... :-(
Ich hoffe, dass ihr versteht was ich meine. Danke für jede Hilfe!
Ciao, Kev
hi,
Die Fehlerkonsole gibt überhaupt nichts aus...
Welche(r) Browser?
var AttributeToCreate = document.createAttribute(Eigenschaft1);
AttributeToCreate.nodeValue = (Inhalt1);
ElementToCreate.setAttributeNode(AttributeToCreate);
Wie hier immer wieder geschrieben wird, ist das im IE oftmals problematisch - und die direkte Version element.attributname = wert vorzuziehen.
Hier dynamisch auch kein Problem:
ElementToCreate[Eigenschaft1] = Inhalt1;
document.getElementById("schrift").innerHTML = "Hallo"; // Zum Test
Die Referenz auf das eben erzeugte Element hast du in ElementToCreate noch vorliegen - also was bringt ElementToCreate.innerHTML = "..."?
gruß,
wahsaga
Danke schön für deine Antwort!
Ich habe es so verändert wie du es gesagt hast, aber es regt sich immer noch nichts.
function createElement(Element, Eigenschaft1, Inhalt1){
var popup = document.getElementById("popup");
var ElementToCreate = document.createElement(Element);
ElementToCreate[Eigenschaft1] = Inhalt1;
popup.appendChild(ElementToCreate);
ElementToCreate.innerHTML = "Hallo"; // Zum Test
}
Hast du sonst noch eine Idee?
Vielen Dank, Kev
PS: Ich habe es gerade noch mit Opera und Netscape getestet. Opera setzt es wie gewünscht um. NN macht es auch nicht. Auch ohne einen Eintrag in der JavaScript-Konsole. Genau wie der Firefox. Haben NN und FF nicht die gleiche Rendering-Engine?
Woran kann das liegen?
hi,
PS: Ich habe es gerade noch mit Opera und Netscape getestet. Opera setzt es wie gewünscht um. NN macht es auch nicht. Auch ohne einen Eintrag in der JavaScript-Konsole. Genau wie der Firefox. Haben NN und FF nicht die gleiche Rendering-Engine?
Woran kann das liegen?
Dann liegt vielleicht noch ein Fehler "drumherum" vor - bspw. bei der _Einbindung_ des Javascript-Codes, so dass dieser gar nicht als solcher erkannt und folglich auch nicht interpretiert wird.
gruß,
wahsaga
Hallo und Vielen Dank für deine Hilfe!
Ich habe keinen Fehler finden können. Deswegen hab ich dir den kompletten Quelltext verkleinert und nur das wichtigste drin gelassen. Jetzt kannst du dich überzeugen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Herzlich Willkommen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<script type="text/javascript">
function createElement(Element, Eigenschaft1, Inhalt1){
var inhalt = document.getElementById("inhalt");
var ElementToCreate = document.createElement(Element);
ElementToCreate[Eigenschaft1] = Inhalt1;
popup.appendChild(ElementToCreate);
ElementToCreate.innerHTML = "Hallo"; // Zum Test
}
~~~~~~html
</script>
</head>
<body>
<div id="total">
<div id="menu" style="height:40px; width: 715px; background-color:#848484">
</div>
<div id="inhalt" style="overflow-y:scroll; height:300px; width:690px; border:1px solid #FFFFFF; padding:1%; margin:0 0 0 0; background-color:#DDDDDD">
</div>
</div>
<div id="test">
<a href="#" onclick="createElement('h1', 'id', 'schrift');return false">Überschrift</a>
</div>
</body>
</html>
Ich kann keinen Fehler entdecken. Wo ist das Problem? Vielen Dank für die Hilfe!
MfG, Kev
Hi!
Ich habe gerade voller Schrecken gesehen, dass es im Opera jetzt auch nicht mehr geht.
Wo ist das Problem? Vielen Dank für die Hilfe!
Ich kann mich nur wiederholen. Vielen Dank für dein Bemühen!
Servus, Kev
Hallo,
Ich habe gerade voller Schrecken gesehen, dass es im Opera jetzt auch nicht mehr geht.
kleiner Flüchtigkeitsfehler: 'popup' durch 'inhalt' ersetzen
popup.appendChild(ElementToCreate);
dann funkts bei Opera 8.6, aber nicht bei 9.1
Gruß plan_B
Ah. Danke. Jetzt funktionierts in meinem Opera 8.52 auch wieder. Danke schön.
Es ist für mich aber immer noch ein riesen Rätsel, warum es sonst nicht funktioniert.
Grüße, Kev
Ich habe keinen Fehler finden können. Deswegen hab ich dir den kompletten Quelltext verkleinert und nur das wichtigste drin gelassen. Jetzt kannst du dich überzeugen:
du bist in eine falle getappt.
<script type="text/javascript">[/code]
[code lang=javascript]
function createElement(Element, Eigenschaft1, Inhalt1){
ist dir aufgefallen, dass die funktion nie aufgerufen wird?
popup.appendChild(ElementToCreate);
und wenn, ist popup nicht definiert
<a href="#" onclick="createElement('h1', 'id', 'schrift');return false">Überschrift</a>
mach hier mal:
<a href="#" onclick="alert( createElement ); ;return false">Überschrift</a>
und du siehst evtl. was falsch läuft.
Struppi.
Vielen Dank für deine Hilfe!
<script type="text/javascript">[/code]
[code lang=javascript]
function createElement(Element, Eigenschaft1, Inhalt1){ist dir aufgefallen, dass die funktion nie aufgerufen wird?
Nein. Wie meinst du das? Ich rufe die Funktion createElement doch mit dem Link auf, oder nicht?
popup.appendChild(ElementToCreate);
und wenn, ist popup nicht definiert
Danke schön, aber darauf hat mich plan_B schon hingewiesen. Das war ein Flüchtigkeitsfehler, der beim Umstellen des Scripts passiert ist.
<a href="#" onclick="createElement('h1', 'id', 'schrift');return false">Überschrift</a>
mach hier mal:
<a href="#" onclick="alert( createElement ); ;return false">Überschrift</a>und du siehst evtl. was falsch läuft.
Das habe ich gemacht. Die Ausgabe ist:
function createElement(){
[native code]
}
Was bedeudet das? Was meint JavaScript mit native code? Könntest du mir das bitte erklären?
Vielen Dank für deine Hilfe! Allerdings habe ich keinen blassen Schimmer, was ich falsch gemacht habe bzw. was ich dagegen tun könnte.
Danke schön! Liebe Grüße, Kev
hi,
Das habe ich gemacht. Die Ausgabe ist:
function createElement(){
[native code]
}Was bedeudet das? Was meint JavaScript mit native code?
Dass es sich um nativ implementierten Code handelt - den der Methode document.createElement.
Da du nur createElement angegeben hast, wird von der aktuellen Position aus "nach oben" gesucht, wo so eine Methode denn wohl zu finden sein könnte.
Hat der Link eine solche Methode? Nein, Fehlanzeige.
Um den Link liegt ein Div, hat das eine solche Methode? Nein, Fehlanzeige.
Jetzt kommen wir irgendwann zu document. Hat das eine solche Methode? Ja, hat es, wunderbar - dann versuchen wir die doch aufzurufen. Dumm nur, dass die keine drei Parameter nehmen will ... (Dass das keine Meldung in der Konsole gibt, glaube ich übrigens nicht.)
Deine Funktion wäre eine Methode des window-Objektes - nur bis zu dem kommen wir dummerweise nicht mehr, weil wir bei document ja schon fündig geworden sind.
Also, nenne das Ding mal anders - und wähle die Namen das nächste mal mit etwas mehr bedacht, so dass es zu solchen Konflikten gar nicht mehr kommt.
(Du hättest im onclick des Links auch explizit window.createElement aufrufen können - aber das führt nur zu Verwirrung und damit vermutlich widerholten Fehlern, also vermeide solche Namensgleichheiten lieber gleich von vornherein.)
gruß,
wahsaga
Vielen Dank! Es funktioniert jetzt. Auf die Idee wäre ich nicht gekommen. Aber in Zukunft werde ich deutsche Namen verwenden. Da bin ich auf der sicheren Seite ;-)
Nochmals danke schön! Kev