innerHTML vs createElement, createAttribute und createTextNode

[suit]

hallo,

ich hab folgendes script bzw funktion geschrieben und man muss dazu sagen, ich hab nicht viel ahnung von javascript ;):

  
function lib_toc() {  
 document.getElementById('toc').firstChild.appendChild(document.createElement('span'));  
 var lib_toc_button = document.getElementById('toc').firstChild.lastChild;  
  
 // lib_toc_button.innerHTML = ' [<a href="#" onclick="return false;">wegschalten</a>]';  
  
 lib_toc_button.appendChild(document.createTextNode(' ['));  
 lib_toc_button.appendChild(document.createElement('a'));  
 lib_toc_button.getElementsByTagName('a')[0].appendChild(document.createTextNode('wegschalten'));  
 var lib_toc_button_href = document.createAttribute("href");  
 var lib_toc_button_onclick = document.createAttribute("onclick");  
 lib_toc_button_href.nodeValue = '#';  
 lib_toc_button_onclick.nodeValue = 'return false';  
 lib_toc_button.getElementsByTagName('a')[0].setAttributeNode(lib_toc_button_href);  
 lib_toc_button.getElementsByTagName('a')[0].setAttributeNode(lib_toc_button_onclick);  
 lib_toc_button.appendChild(document.createTextNode(']'));  
}  

die frage nun:
beide scripte tun in sämtlichen relevanten browsern genau das, was ich möchte - welchen nachteil bietet die auskommentierte zeile mit innerHTML im vergleich zu den folgenden zeilen, die das selbe mittels dom-funktionen einfügen?

und natürlich die frage: mache ich das ganze unnötig kompliziert bzw gehts kürzer auch?

html-quelltext der seite ist übrigens xhtml 1.0 strict und wird als text/html ausgeliefert

hintergrund:
beim laden der seite soll diese funktion in ein element eine ein/ausblendefunktion einfügen - wer kein javascript hat, wird nicht durch diesen pseudo-link gestört und bekommt ihn garnicht erst

danke im voraus

[molily]

Hallo,

welchen nachteil bietet die auskommentierte zeile mit innerHTML im vergleich zu den folgenden zeilen, die das selbe mittels dom-funktionen einfügen?

Keinen, sie bietet nur Vorteile, denn dein DOM-Code ist suboptimal. Sich mit DOM einen abzubrechen ist nie gut und macht m.M.n. höchstens Sinn, wenn es notwendig ist oder man ohnehin eine Bibliothek benutzt, die das Erstellen von DOM-Strukturen vereinfacht.

Du kannst deinen DOM-Code aber auch marginal verkürzen und verbessern:

lib_toc_button.appendChild(document.createTextNode(' ['));  
var aElem = document.createElement('a');  
aElem.appendChild(document.createTextNode('wegschalten'));  
aElem.href = "#";  
aElem.onclick = function () { return false; };  
lib_toc_button.appendChild(aElem);  
lib_toc_button.appendChild(document.createTextNode(']'));

Mathias

[suit]

Keinen, sie bietet nur Vorteile, denn dein DOM-Code ist suboptimal.

gut, ich hab jetzt die innerHTML-variante benutzt und funktioniert einwandfrei

noch eine kleine frage nachträglich:
hat die dom-variante irgendwelche vorteile gegenüber innerHTML? zb geschwindigkeit oder ähnliches?

[molily]

Hallo,

hat die dom-variante irgendwelche vorteile gegenüber innerHTML? zb geschwindigkeit oder ähnliches?

Nein, sie ist i.d.R. lahmer. (Auch wenn sich der Performance-Unterschied in der Größenordnung nicht bemerkbar macht.)

Das Arbeiten mit dem DOM läuft ganz anders ab als das Zusammenbauen von HTML-Codestrings. Da muss man jeweils ganz andere Sachen beachten, z.B. das Maskieren von gefährlichen Zeichen. Das kommt aber ganz auf die Situation an.

Mathias

[molily]

document.getElementById('toc').firstChild.appendChild(document.createElement('span'));
var lib_toc_button = document.getElementById('toc').firstChild.lastChild;

Wieso erzeugst du erst ein Element, hängst es ein und suchst dann nochmal danach??

createElement gibt dir die Referenz auf das Elementobjekt zurück, wenn du die mal zwischenspeicherst, ersparst du dir das ganze Herumgesuche im DOM-Baum mit firstChild.lastChild... oder, noch schlimmer, getElementsByTagName.