Transition bei Tausch von DOM children

[Rolf B]

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