Question

I’m creating a browser plugin (bookmarklet) that exacts a large XML document embedded within the page’s <textarea> element. This is a custom XML language that includes a few self-closing tags (e.g., <custom-tag />). I’m able to capture the XML document, wrap it in a jQuery object variable (e.g., $(myXml)), and easily manipulate the data. However, after I try inserting the manipulated XML document back in the page’s <textarea> element, all the self-closing tags are changed into separate opening and closing tags. Here’s an example of what’s happening:

BEFORE:

<outer-tag>
    <SELF-CLOSING-TAG foo="bar" />
    <second-tag>
        <third-tag>Some Value</third-tag>
    </second-tag>
</outer-tag>

AFTER jQUERY MANIPULATION:

<outer-tag>
    <SELF-CLOSING-TAG foo="bar">
        <second-tag>
            <third-tag>Some Value</third-tag>
        </second-tag>
    </SELF-CLOSING-TAG>
</outer-tag>

Is there any way I can prevent jQuery (or is it just JavaScript or the browser?) from turning these self-closing tags into opening and closing tags? This latter way is invalid for the XML schema we’re using. If there’s no way around that, are there any other hacks worth considering?

UPDATE:
Drejc’s ideas pointed me in the right direction to solve this issue. After his input, I got the additional advice on this additional S.O. post and together this solved the problem.

Answer 1

Have you checked when this happens. After inserting a new element or after read out. You might give it a try with no self closing elements, like this:

<outer-tag>
    <SELF-CLOSING-TAG foo="bar"></<SELF-CLOSING-TAG>
    <second-tag>
        <third-tag>Some Value</third-tag>
    </second-tag>
</outer-tag>

It might help.