I need to correct my previous case.
If only a single element is inserted, then the anticipated wrapperEl.insertBefore()
is called.
The problem I described earlier happens when more than one element needs to be inserted. Example:
- Given: [ “1”, “4”, “5”, “6”, “7” ]
- If we insert “2” and “3”: [ “1”, “2”, “3”, “4”, “5”, “6”, “7” ]
- Then
wrapperEl.appendChild()
is called with document fragment of [ “2”, “3”, “4”, “5”, “6”, “7” ]
Additionally, I’m observing that any time that a DOM element is added to a document fragment, the element is being removed from the DOM, causing layout recalculation.