Inconsitent appendChild behavior from Web implementation #3802
Description
Basic info:
- Node.js version: 22.12.0
- jsdom version: 25.0.1
Minimal reproduction case
Given a document with the following XML:
<bar>
<bar id="theBar"><child-bars/></bar>
<child-bars/>
</bar>using appendChild to move #theBar into the parent child-bars element will generate the error [DOMException [HierarchyRequestError]: The operation would yield an incorrect node tree.].
const { JSDOM } = require('jsdom');
const xml = `
<bar>
<bar id="theBar"><child-bars/></bar>
<child-bars/>
</bar>
`.trim();
const { document } = new JSDOM(xml, { contentType: 'text/xml' }).window;
for (const bar of [...document.querySelectorAll('bar')]) {
if (!bar.parentElement) continue;
bar.parentElement.querySelector(':scope > child-bars').appendChild(bar);
}How does similar code behave in browsers?
Comparatively running the same in FireFox works as expected.
const xml = `
<bar>
<bar id="theBar"><child-bars/></bar>
<child-bars/>
</bar>
`.trim();
const doc = new DOMParser().parseFromString(xml, 'text/xml');
for (const bar of [...doc.querySelectorAll('bar')]) {
if (!bar.parentElement) continue;
bar.parentElement.querySelector(':scope > child-bars').appendChild(bar);
}