Hallo Tom,
wenn man von diesem DOM ausgeht:
<div id="div1"><img id="img1" src="..." alt="..."></div>
<div id="div2"><img id="img2" src="..." alt="..."></div>
dann macht diese Zeile
div2.appendChild(img1.replaceWith(img2));
folgendes:
-
zuerst mal der replaceWith Aufruf:
- replaceWidth merkt sich img1
- Dann wird img2 aus der Children-Liste von div2 gelöscht und an Stelle von img1 in die Children-Liste von div1 geschrieben
- Die Parent-Beziehung von img1 wird gelöscht
- Die Parent-Beziehung von img2 wird angepasst
- img1 ist jetzt ein Waisenkind und hat Angst vor dem bösen Garbage Collector. replaceWidth schmeißt es achtlos auf den Stack und geht nach Hause.
-
appendChild kommt daher
- appendChild findet ein trauriges img1 auf dem Stack und nimmt sich seiner an
- img1 wird an die Children-Liste von div2 angehängt und die Parent-Beziehung von img1 wird neu gesetzt. Damit ist seine Waisenzeit vorbei und die beiden freuen sich über ihre neue Familie.
- Der gruselige Garbage Collector kommt vorbei und knurrt „Ich sah hier ein elternloses DOM Element!“ Aber div2 legt sich schützend um das zitternde img1 und sagt nur: „Das ist mein Kind, das bleibt bei mir!“
Rolf
--
sumpsi - posui - obstruxi
sumpsi - posui - obstruxi