innerHTML vs. appendChild

[zaphod1984]

guten tag,
was ist der konkrete unterschied zwischen folgenden varianten:

variante I:
parentBox.innerHTML = parentBox.innerHTML + '<div align="center">some Text</div>';

variante II:
var disc = document.createElement('div');
disc.align = 'center';
disc.innerHTML = 'someText';
parentBox.appendChild(disc);

ich WEIß was der unterschied zwischen den beiden möglichkeiten ist, rein prinzipiell, was ich aber nicht verstehe ist der unterschied in der verhaltensweise der browser!
(getestet in FF und IE, gleiches verhalten)

konkret passiert das folgende:
in parentBox existieren ein paar elemente (hauptsächlich divs) die dynamisch per appendChild hinzugefügt werden. bei einigen bildern wird außerdem onmouseover ausgewertet um zusatzinformationen anzuzeigen.
bei variante I werden diese events aber nicht gefeuert, bei variante II schon!

liegt es irgendwie daran dass nach dem setzen von innnerHTML der lokale DOM-tree neu aufgebaut werden muss, während er bei appendChild lediglich erweitert wird?
any ideas?
:)

[Struppi]

konkret passiert das folgende:
in parentBox existieren ein paar elemente (hauptsächlich divs) die dynamisch per appendChild hinzugefügt werden. bei einigen bildern wird außerdem onmouseover ausgewertet um zusatzinformationen anzuzeigen.
bei variante I werden diese events aber nicht gefeuert, bei variante II schon!

Ist das so?
Das läßt sich mit deinem Beispiel ja leider nicht verifizieren und mir ist das jetzt zu mühsam das nachzubauen.

Struppi.

[zaphod1984]

Ist das so?
Das läßt sich mit deinem Beispiel ja leider nicht verifizieren und mir ist das jetzt zu mühsam das nachzubauen.

ja das ist so, deswegen hab ich das auch so hingeschrieben.
ich habe mir gedacht, bevor ich jetzt ellenlangen javascriptcode poste (der null relevanz für die fragestellung hat) beschreibe ich lieber den sachverhalt.

[ChrisB]

Hi,

was ist der konkrete unterschied zwischen folgenden varianten:

Zunaechst mal haben im vorliegenden Falle beide gemeinsam, dass sie "schlecht" sind - weil du Pseudo-Darstellungsattribute wie align nutzt, anstatt die Darstellung CSS zu ueberlassen.

variante II:
var disc = document.createElement('div');
disc.align = 'center';
disc.innerHTML = 'someText';

Wenn du schon den DOM-Ansatz verfolgst, dann waere es konsequenter, hier dann auch noch einen Textknoten zu erzeugen und in den Div einzuhaengen, als dann da wieder mit innerHTML zu hantieren.

liegt es irgendwie daran dass nach dem setzen von innnerHTML der lokale DOM-tree neu aufgebaut werden muss, während er bei appendChild lediglich erweitert wird?

Das Ueberschreiben von innerHTML zerstoert dynamisch per JavaScript gesetzte Eventhandler, falls es das ist, was du meinst (das laesst sich ja, wie Struppi schon anmerkte, aus deinem Code nicht erkennen).

MfG ChrisB

[zaphod1984]

Zunaechst mal haben im vorliegenden Falle beide gemeinsam, dass sie "schlecht" sind - weil du Pseudo-Darstellungsattribute wie align nutzt, anstatt die Darstellung CSS zu ueberlassen.

ja, stimmt.

Wenn du schon den DOM-Ansatz verfolgst, dann waere es konsequenter, hier dann auch noch einen Textknoten zu erzeugen und in den Div einzuhaengen, als dann da wieder mit innerHTML zu hantieren.

ja, stimmt.

Das Ueberschreiben von innerHTML zerstoert dynamisch per JavaScript gesetzte Eventhandler, falls es das ist, was du meinst (das laesst sich ja, wie Struppi schon anmerkte, aus deinem Code nicht erkennen).

herzlichen dank, das wollte ich wissen.
ansonsten siehe den anderen post...

[MudGuard]

Hi,

liegt es irgendwie daran dass nach dem setzen von innnerHTML der lokale DOM-tree neu aufgebaut werden muss, während er bei appendChild lediglich erweitert wird?

Das Ueberschreiben von innerHTML zerstoert dynamisch per JavaScript gesetzte Eventhandler,

und löscht ggf. in input-Felder vom User eingegebene Werte.

cu,
Andreas