How to insert XML elements into the browser DOM

Question

I'm using jQuery Ajax to retrieve an XML document from the server which I then want to transform into HTML and inject into the browser DOM. I'm retrieving it using dataType:'xml' so it's wrapped as an XML document rather than HTML. This allows me to do the manipulation I want to do before insertion.

However, I can't find a way to insert the manipulated xml into the DOM:

$('#myContainer').append(myXML)

causes a security violation in IE and has no effect in Firefox, while

$('#myContainer').append(myXML[0].xml)

works in IE but not Firefox (the xml property appears to be non-standard)

myXML.text() returns only the text nodes from the XML, and not the markup, while myXML.html() returns null.

I've also tried retrieving it as text, which allows me to create a "standard" jQuery object which inserts just fine. However, I have the following sort of thing going on:

<div><input type='checkbox'><otherElement/></input></div>

and want to modify the input element based on the contents of otherElement. If I recover the original xml as text, jQuery reduces it to

<div><input type='checkbox'><otherElement/></div>

so that the parent element of otherElement is the div and not the input, making manipulation of the input element unreliable. The same occurs if I retrieve it as html.

Any suggestions much appreciated.

Paul Dundon · Accepted Answer · 2011-09-20 06:10:31Z

2

The solution is to load it using 'dataType':'text' and then use $parseXML to create the jQuery object. This preserves the markup, and nodes from the resulting object can be inserted into the DOM.

answered Sep 20, 2011 at 6:10

Paul Dundon

514 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

regality · Accepted Answer · 2011-09-15 23:40:23Z

0

I would retrive it as html, manipulate it, and then attach it to the DOM:

<script type="text/javascript">
$.ajax({"url":"/ajax.whatever",
        "dataType":"html",
        "success":function(data) {
           var html = $(data);
           // modify html as a jquery object
           // ...
           $("#myContainer").append(html);
        }
}    );
</script>

answered Sep 15, 2011 at 23:40

regality

6,5846 gold badges31 silver badges26 bronze badges

1 Comment

Paul Dundon Over a year ago

Thanks. Unfortunately, retrieving it as html has the same problem as retrieving it as text - the content of the document is changed to that children of input elements are effectively re-parented.

Collectives™ on Stack Overflow

How to insert XML elements into the browser DOM

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related