Question

Here is the dilemma:

I am doing a javascript effect. To do so I am pulling a node and it’s children (including images) with .innerHTML. Then trying to parse it via the DOM. When it gets to the image tags it throws a parse error. When I alert the innerHTML I see that it is stripping the closing for the IMG tags.

I am not sure if the problem is with the parser or innerHTML. How can I take this node, grab the internal contents, parse it as XML?

Looks like a similar thing happened here: innerHTML removing closing slash from image tag

(This is the only page in the internet that I found that touches on this issue after almost two Days of searching.)

Here is the parse code I am using:

function loadXMLString(txt) {
    if (window.DOMParser) {
        parser=new DOMParser();
        xmlDoc=parser.parseFromString(txt,"text/xml");
    } else { // Internet Explorer
        xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async="false";
        xmlDoc.loadXML(txt); 
    }
    return xmlDoc;
}

The resolution was to change the mime type, but how do you do that with the javascript parser (both MS ActiveX and the other browser’s standard)? What mime should I use?

Here is the DOM Element I am attempting to parse:

<div style="display:none" id="ItemsContainer" name="ItemsContainer">
    <SPAN>
       <a href="url1"><img src="1.jpg" alt="alt1" /></a>
       <a href="url2"><img src="2.jpg" alt="alt2" /></a>
       <a href="url3"><img src="3.png" alt="alt3" /></a>
       <a href="url4"><img src="4.jpg" alt="alt4" /></a>
    </SPAN>
</div>

If I change the tags to another name, like then it works. It seems that innerHTML is breaking the tag or that the parser can’t parse IMG tags.

Please advise.
Thanks In Advance!

Answer 1

IE automatically capitalizes Tag names (so becomes ) so I used txt.replace(/><\/a>/g, " /></a>").replace(/><\/A>/g, " /></A>")

Thanks to all who helped!