jquery ajax innerhtml,javascript - JQuery html() vs. innerHTML - Stack Overflow

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

tag nested within a

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.

$(function() {

// the following two blocks of HTML are identical except the P tag is outside the form in the first case

var html1 = "

";

var html2 = "

";

//

tag nested within

RunTest("

tag nested within

tag", html1); // succeeds in Internet Explorer

RunTest("

tag nested within

tag with leading newline", "\n" + html1); // fails with added new line in Internet Explorer

//

tag nested within

RunTest("

tag nested within

tag", html2); // succeeds in Internet Explorer

RunTest("

tag nested within

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")

);

}

This is #placeholder text will