parentNode is not the same after diffing

[devmondo]

Hi again,

i have this html in page

<div id="root">
    <h1>child</h1>
</div>

and here is my virtual Node

let virtualNode = document.createElement(`div`);
virtualNode.id = `root`;

let child = document.createElement(`h1`);
child.innerHTML = ` diffed child`;
virtualNode.appendChild(child);

let realNode = document.getElementById(`root`);
morph(realNode, virtualNode)

let anotherChild = document.createElement(`h1`);
anotherChild.innerHTML = ` anotherChild`;

child.parentNode.appendChild(anotherChild);

the problem is that in above child.parentNode is still the virtualNode and not the real one after diffing.

[DylanPiercey]

The algorithm will not use the "virtual" nodes. It will clone them.
This is the expected behaviour and makes the results of set-dom more predictable since the point of the algorithm is to reuse as much of the existing dom as possibl. There is no way to guarantee that virtual node would be inserted (so they never are).

I also recommend using templates as opposed to just manually creating dom (just much easier to read).

[devmondo]

thanks :)