Menu
Can I completely rely upon jQuery's html() method behaving identical to innerHTML? Is there any difference between innerHTML and jQuery's html() method? If these methods both do the same, can I use jQuery's html() method in place of innerHTML?
My problem is: I am working on already designed pages, the pages contains tables and in JavaScript the innerHTML property is being used to populate them dynamically.
The application is working fine on Firefox but Internet Explorer fires an error: unknown runtime exception. I used jQuery's html() method and IE's error has disappeared. But I'm not sure it will work for all browsers and I'm not sure whether to replace all innerHTML properties with jQuery's html() method.
Thanks a lot.
923
All HTML elements have inner HTML properties. The . html() jQuery method retrieves the HTML content of the first element in the particular set of matched elements. Remember: jQuery innerHTML does not exist as a function.
It then adds them to the DOM separately in a manner that causes their execution. .html() implicitly causes a few operations (script handling being one) whereas writing to innerHTML simply causes the innerHTML to change, but very little is done with that HTML.
Working of jQuery html()The method html () selects or returns the content or innerHTML of the elements chosen. While using this method to return content, it provides the first matched element content. Whenever this process is used for setting content, the content of all matched elements is overwritten.
You can use . text() method in jQuery.
To answer your question:
.html() will just call .innerHTML after doing some checks for nodeTypes and stuff. It also uses a try/catch block where it tries to use innerHTML first and if that fails, it'll fallback gracefully to jQuery's .empty() + append()
124
Specifically regarding "Can I rely completely upon jquery html() method that it'll perform like innerHTML" my answer is NO!
Run this in internet explorer 7 or 8 and you'll see.
jQuery produces bad HTML when setting HTML containing a <FORM> tag nested within a <P> tag where the beginning of the string is a newline!
There are several test cases here and the comments when run should be self explanatory enough. This is quite obscure, but not understanding what's going on is a little disconcerting. I'm going to file a bug report.
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script> $(function() { // the following two blocks of HTML are identical except the P tag is outside the form in the first case var html1 = "<p><form id='form1'><input type='text' name='field1' value='111' /><div class='foo' /><input type='text' name='field2' value='222' /></form></p>"; var html2 = "<form id='form1'><p><input type='text' name='field1' value='111' /><div class='foo' /><input type='text' name='field2' value='222' /></p></form>"; // <FORM> tag nested within <P> RunTest("<FORM> tag nested within <P> tag", html1); // succeeds in Internet Explorer RunTest("<FORM> tag nested within <P> tag with leading newline", "\n" + html1); // fails with added new line in Internet Explorer // <P> tag nested within <HTML> RunTest("<P> tag nested within <FORM> tag", html2); // succeeds in Internet Explorer RunTest("<P> tag nested within <FORM> tag with leading newline", "\n" + html2); // succeeds in Internet Explorer even with \n }); function RunTest(testName, html) { // run with jQuery $("#placeholder").html(html); var jqueryDOM = $('#placeholder').html(); var jqueryFormSerialize = $("#placeholder form").serialize(); // run with innerHTML $("#placeholder")[0].innerHTML = html; var innerHTMLDOM = $('#placeholder').html(); var innerHTMLFormSerialize = $("#placeholder form").serialize(); var expectedSerializedValue = "field1=111&field2=222"; alert( 'TEST NAME: ' + testName + '\n\n' + 'The HTML :\n"' + html + '"\n\n' + 'looks like this in the DOM when assigned with jQuery.html() :\n"' + jqueryDOM + '"\n\n' + 'and looks like this in the DOM when assigned with innerHTML :\n"' + innerHTMLDOM + '"\n\n' + 'We expect the form to serialize with jQuery.serialize() to be "' + expectedSerializedValue + '"\n\n' + 'When using jQuery to initially set the DOM the serialized value is :\n"' + jqueryFormSerialize + '\n' + 'When using innerHTML to initially set the DOM the serialized value is :\n"' + innerHTMLFormSerialize + '\n\n' + 'jQuery test : ' + (jqueryFormSerialize == expectedSerializedValue ? "SUCCEEDED" : "FAILED") + '\n' + 'InnerHTML test : ' + (innerHTMLFormSerialize == expectedSerializedValue ? "SUCCEEDED" : "FAILED") ); } </script> </head> <div id="placeholder"> This is #placeholder text will </div> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
