jQuery's .html() function is frequently used to read and modify the contents of a page, unfortunately is uses innerHTML for this. innerHTML is evil for a number of reasons; mainly it's poor support in IE and inconsistent output across browsers

To illustrate this I've compared jQuery's .html() output, and that of innerXHTML which reads and writes clean XHTML reliably.

See the test in action

The Results

Sure enough, we get some problems with jQuery (innerHTML) in IE:

  • No "quotes" on some attributes (id and class in this example);
  • UPPERCASE tags;
  • Ending list item tags </li> only appear on the last list item.

So for example if you were to use .html() to check whether a node contained particular HTML it's not going to work. Or likewise, if you wanted to feed your page's HTML to, say, a Flash parser it's going to have to deal with a load of crud.

jQuery interacts beautifully with the DOM, it'd be nice if you could harness some of that power when spitting out a HTML string as with innerXHTML

Comments

Chris says

14 April 2009 - 8:27pm

How old is this post? Is this still a problem?

Anon says

29 May 2009 - 8:32am

I agree with Chris. This sort of information needs to be timestamped or people arriving via search engines will have no idea of it's currency.

prof shah says

9 June 2009 - 5:54pm

This is still a problem. I hate IE..... I would have imagined jquery would take this into consideration and fix the quote problem atleast.

Daniel Serodio says

16 June 2009 - 2:48pm

Thanks for the heads-up (and I agree with the need to date this post). Is there a filed bug in jQuery's issue tracker? This is exactly the kind of browser abstraction I expect jQuery to provide!

Paolo says

3 July 2009 - 1:50pm

dude, i love your layout. : )

jeanluca says

5 September 2009 - 8:34pm

you can see it in the code (it still uses innerHTML)

wariodiaz says

26 November 2009 - 3:58pm

jQuery Sources File:

483 html: function( value ) {
484 return value === undefined ?
485 (this[0] ?
486 this[0].innerHTML.replace(/ jQuery\d+="(?:\d+|null)"/g, "") :
487 null) :
488 this.empty().append( value );
489 },

jQuery use innerHTML :S... jQuery.html() == Element.innerHTML ...
www.devtics.com.mx

Ulrahr says

25 December 2009 - 11:13pm

I really love JQuery and it's ui widgets,.. but indeed... using innerHTML was (and still is) not a good idea of theirs to begin with.

For DOM manipulating and Ajax requests I prefer the way Taconite (http://taconite.sourceforge.net/) handles it. It doesn't make use of innerHTML, but uses pure DOM manipulation instead.

Taconite can also be used together with JQuery through a jQuery-plugin.

Check it out.

http://taconite.sourceforge.net/

Devin Walker says

19 December 2011 - 6:16pm

This IE bug is killing me... I keep trying to pull content via AJAX and works perfectly in other modern browsers.