Operations with me, my, and I after append on parent element result in silent failure

[MeemeeLab]

Operations using me, my and I after append operations on parent silently fails.

Looks like append operation is using += operation on innerHTML, which makes entire innerHTML parsed again and Element that existed before gets replaced with new Element and causing the problem.

_hyperscript/src/_hyperscript.js

Line 5849 in 898345a

target.innerHTML += value;

Simplified explanation:

1. _hyperscript holds Element (me)
2. Parent's innerHTML changes
3. innerHTML gets parsed once again and replaced with new Element
4. me points to Element that no longer exists

IMO, For performance reason append should not use target.innerHTML += ... but use Element.append() so that this problem will not happen and browser don't have to parse all elements once again:

let newElementString = '<div>Hello World</div>';

target.innerHTML += newElementString; // This causes performance issue and already existing Elements gets replaced with new Element

let newElement = document.createElement('div');
newElement.outerHTML = newElementString;
target.append(newElement); // This "appends" the element, browser only have to parse new element and this issue solves too

Examples:

Works:

<div id="container">
    <button _="on click remove me">
        Click
    </button>
</div>

Result: Button gets removed after click (expected)

<div id="container">
    <button _="on click set me.style.background to 'red'">
        Click
    </button>
</div>

Result: Button becomes red after click (expected)

Does not work:

<div id="container">
    <button _="on click append '<div>You clicked!</div>' to #container then remove me">
        Click
    </button>
</div>

Expected: Shows "You clicked!" and button disappears
Actual: Shows "You clicked!" but button does not disappear

<div id="container">
    <button _="on click append '<div>You clicked!</div>' to #container then set me.style.background to 'red'">
        Click
    </button>
</div>

Expected: Shows "You clicked!" and button becomes red
Actual: Shows "You clicked!" but button does not become red