D.R.: DOM für IE7: dynamisch attribute setzen

Beitrag lesen

Hallo,

Vielleicht werde ich auf folgende supi IE Möglichkeit zurückgreifen: Alles in HTML, style=display:none und dann dynamisch ein- und ausblenden.

Alternativ zu CSS könntest du auch folgendes machen:

Dein Formular (Beispiel):

  
<form action="?" id="myForm">  
<label><input type="radio" name="rb" />Radiobutton 1</label>  
<label><input type="radio" name="rb" />Radiobutton 2</label>  
<label><input type="radio" name="rb" />Radiobutton 3</label>  
</form>

Onload (am besten mit window.onload in Script) machst du dann folgendes:

var formular = document.forms.myForm.parentNode.removeChild(myForm);

Damit wird das Formular erstmal entfernt und in eine Variable gespeichert. Ausgeben könntest du es dann z.B. so:

document.body.appendChild(formular);

Es muss ja kein schöner Code sien, es muss funktionieren :)

Das ist mMn keine gute Einstellung. Außerdem solltest du darauf achten, dass die Seite auch ohne JS und/oder ohne CSS[1] bestmöglich funktioniert.

Übrigens machst du's dir mit createAttribute etc. eigentlich unnötig schwer. Name-Attribute könntest du z.B. auch einfach so setzen:

Naja, meine Funktion ist ziemlich flexibel, das geht nämlich so:
createElement("tagname, zb 'div'", "into (für 'in ein Element'), "before" oder "after", target (einen String für ein Element mit der ID 'target', "id::foo#name::bar", "textNode");

Naja, ganz so weit würde ich es nicht treiben ;-), aber etwas ähnliches habe ich mir auch mal geschrieben:

HTMLElement.prototype.addElement = function(tagName,Attribute){  
 var el = document.createElement(tagName);  
 for (var att in Attribute){  
  el[att] = Attribute[att];  
 }  
 return this.appendChild(el);  
}

Um jetzt z.B. ein <p>-Element mit der Klasse „absatz“ und der ID „lastAbsatz“ in dem <body> zu schreiben, müsste ich die Methode so aufrufen:

document.body.addElement("p",{className:"absatz",id:"lastAbsatz"});

Der Nachteil an der Methode: sie funzt mal wieder im allseits geliebten IE nicht, weil dieser keinen HTMLElement-Prototyp hat (auch nichts vergleichbares). Klar könnte ich statt dessen auch eine einfache Funktion erstellen, der ich dann den Ausgabeort als Parameter mitteile, aber das würde die ganze Sache unübersichtlicher machen.

Kurze Erklärung zu dem {x:"x"}: Das ist kein von mir ausgedachter String, sondern eine vereinfachte Möglichkeit, um Objekte zu erstellen.

Der vorletzte Parameter ist entscheidend, man kann unendlich viele Attribute gleich anhängen, z.B. "href::http://www.google.com/#target::_blank", das macht es echt sehr angenehm. Vielleicht nicht sooo elegant, weils ne eigene Syntax benötigt, aber angenehm und sehr schnell.

Das „sehr schnell“ bezieht sich wohl auf die Menge des Quellcodes und nicht auf die tatsächliche Verarbeitungsgeschwindigkeit[2] oder? Ich würde dafür richtige Objekte verwenden. Also lieber auch so:

{href: "http://www.google.com/", target: "_blank"}

Dann kannst du dir dieses ganze „Gehangel“ durch den String sparen und statt dessen einfach eine kleine for-in verwenden, um die Attribute anzuhängen. Von der Geschwindigkeit her, müsste diese Variante auf jeden Fall schneller sein, als wenn du erst einen String parsen musst.

[1] d.h. die Seite muss dann nicht unbedingt schön bunt sein, sondern funktionieren.
[2] Obwohl diese -zugegebener Maßen- nicht unbedingt DIE Rolle spielt.

mfg. Daniel