XSLT converts <image> node to <img> tag when outputiing to DOM

Question

It's 2024, and I am working on a project that incorporates XSLT technology.

I came up with a simple way to access XML file that is being transoformed with javascript simply but outputing it to a hidden div, and then parsing it's content with XMLParser in JS.

<div class="hidden">
    <xsl:copy-of select="/*" />
</div>

Everything worked so far, I could access nodes with querySelector and attributes. Only problem I just noticed - if XML file has image node it is being converted to img

Something like that:

<div class="hidden">
    <object>
        <image>link</image>
    </object>
</div>

Converts to

<div class="hidden">
    <object>
        <img>link
    </object>
</div>

Which is completely wrong and breaks parsing. It only happens to this node. I don't really know what causes this - I am using IE11 compatability mode to transform XSLT stuff - any way to stop it from doing so? I obviously can't modify the XML since it comes from backend.

Answer 1

I don't think this has anything to do with XSLT, if you let an HTML parser parse markup like the one you showed then it parses into an HTML object element containing an HTML img element.

document.getElementById('test').innerHTML = `<object><image><\/image><\/object>`;
console.log(document.getElementById('test'));
console.log(document.getElementById('test').outerHTML);

<div id="test"></div>

So don't expect to be able to parse and preserve XML by parsing it as HTML5.

You can store XML in an HTML script element and read out its .text property:

var scriptElement = document.getElementById('test');

console.log(scriptElement.text);

var xmlDoc = new DOMParser().parseFromString(scriptElement.text, 'application/xml');

console.log(xmlDoc);

<script id="test" type="application/xml"><object><image></image></object></script>