1

We are using jQuery to generate an XML fragment and then convert it to a string using the html() function. But as we just found out, and if anyone doesn't know, the html() JavaScript function as implemented in IE is broken, broken, broken. Basically, it capitalizes some tags, adds attributes to others "helpfully" (in our case, ), and generally doesn't do the Right Thing.

I would like to use something like this to generate the XML string instead:

http://www.stainlessvision.com/jquery-html-vs-innerxhtml

However, this library won't play nicely with jQuery out of the box, e.g.:

var $dummyRoot = $('<dummyroot/>'); // since html() doesn't generate the outer element
var $foo = $('<foo></foo>');
var $font = $('<font ></font >');
$foo.append($font);
$dummyRoot.append($foo);
var $s = innerXHTML($dummyRoot); // <-- Doesn't work

I think it wants a more W3C DOM-ish object.

How can I get jQuery to talk to this innerXHTML() function; or, alternatively, is there another function I can use (maybe something built into jQuery or a jQuery plugin))?

Edit: Follow up for DDaviesBrackett's question. I also have a "body" element in my XML; look how it picks up CSS styling (and not just a element).

Is there an unwritten rule to not generate XML inside the DOM whose elements have names like body, font, head, etc.?

var $dummyRoot = $('<dummyroot/>');
var $foo = $('<foo></foo>');
var $body = $('<body></body>');
var $font = $('<font></font>');
$body.append($font);
$foo.append($body);
$dummyRoot.append($foo);

var $s = innerXHTML($dummyRoot[0]);

// $s equals "<foo><body bottommargin="15" leftmargin="10" rightmargin="10" topmargin="15"><font size="+0"></font></body></foo>"
Shaggy Frog
  • 27,575
  • 16
  • 91
  • 128

2 Answers2

1

the jQuery object wraps its contents, but exposes them via an array indexer. What do you get when you use

var $s = innerXHTML($dummyRoot[0]);

instead of your example?

Dan Davies Brackett
  • 9,811
  • 2
  • 32
  • 54
0

Is there an unwritten rule to not generate XML inside the DOM whose elements have names like body, font, head, etc.?

jQuery relies on the innerHTML property to parse a given piece of text and construct the DOM from that. It was never meant to parse or generate XML as colliding names can give totally unpredictable results depending on how the browser sees it.

See

I have given a similar answer for generating proper XML in fewer steps using a recursive approach. To create the following XML:

<foo>
    <body>
        <font></font>
    </body>
</foo>

you would write:

Σ('foo', 
    Σ('body', 
        Σ('font', '')
    )
);

Σ just looks cooler, but you can change the function name to whatever you want :)

Community
  • 1
  • 1
Anurag
  • 140,337
  • 36
  • 221
  • 257
  • I had a closer look at your cool Sigma operator, but I'm wondering how I'd use it to generate the XML if I have to loop through an existing data structure. All of your examples so far (here and in the other question) are all doing the XML building statically. – Shaggy Frog Aug 07 '10 at 00:36
  • There are only three basic elements at work here - `createElement`, `createTextNode`, and `appendChild`. The first two require the document object for which the node is being created, and the last one required the parent node to which the new node is being appended. I will try to update the example for dynamically generating the XML. – Anurag Aug 07 '10 at 01:32