SCRIPT5022: WrongDocumentError appending element on IE

Question

Short background: I've been trying to create a newsletter content generator that takes XML feed as a source. To make it work, i must prepare each XML node element to fit my newsletter layout.

I use this method to merge 2 adjacent xml elements into single group node:

element_getter: function(xml) {

var deals = $(xml).find('campaign:eq(0) deal');

    deals = $.map(deals, function(val, index){

        if (index % 2 == 1) return;


        var group = $(document.createElement('group'));

        $(group).append(deals[index]);

            if (deals[index+1]) 
                $(group).append(deals[index+1]);        

            return group;
        });

        return deals;
    }

The problem occurs with IE. When I try to create new node in document or to append any content into it, I get SCRIPT5022: WrongDocumentError (This does not occur with FF or Chrome) I've already tried to append this element in different ways (like $.parseXML), but it doesn't do the trick.

Any ideas?

Here is example of XML source:

<ebi-cmp-list version="1">
<campaign id="2">
    <title>Campaign</title>
    <startTime ts="201309090600">2013-09-09 06:00</startTime>
    <endTime ts="201309102359">2013-09-10 23:59</endTime>
    <type id="2">spec_offer</type>
    <deals>
        <deal id="15814">
            <event id="15814">Test Event</event>
            <venue id="429">Arena</venue>
            <city id="20">Berlin</city>
            <category id="73">Shows</category>
            <time ts="201310122000">2013-10-12 20:00</time>
            <price>
                <oldPrice currency="EUR">113.00</oldPrice>
                <newPrice currency="EUR">113.00</newPrice>
            </price>
            <ticketsLeft>26</ticketsLeft>
            <link rel="img">http://www.example.com</link>
            <link rel="event">http://www.example.com</link>
        </deal>
        <deal id="15814">
            <event id="15814">Test Event</event>
            <venue id="429">Arena</venue>
            <city id="20">Berlin</city>
            <category id="73">Shows</category>
            <time ts="201310122000">2013-10-12 20:00</time>
            <price>
                <oldPrice currency="EUR">113.00</oldPrice>
                <newPrice currency="EUR">113.00</newPrice>
            </price>
            <ticketsLeft>26</ticketsLeft>
            <link rel="img">http://www.example.com</link>
            <link rel="event">http://www.example.com</link>
        </deal>
    </deals>
</campaign>

Answer 1

I'm surprised the other browsers don't complain, because normally you can not simple append a node that belongs to one document (your XML) to another document (your HTML document) – you should only be able to append nodes into a node that has the same ownerDocument.

Try importing your XML nodes into your HTML document's “scope” with importNode first.