JQuery html vs innerHTML

Question

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

User · Answer

Given the general support of  innerHTML these days  the only effective difference now is that  html   will execute code in any  lt script gt  tags if there are any in the html you give it   innerHTML  under HTML5  will not   From the jQuery docs      By design  any jQuery constructor or method that accepts an HTML string     jQuery     append     after    etc      can potentially execute code  This can occur by injection of script tags or use of HTML attributes that execute code  for example   lt img onload    gt    Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters  cookies  or form inputs  Doing so can introduce cross-site-scripting  XSS  vulnerabilities  Remove or escape any user input before adding content to the document    Note  both  innerHTML and  html   can execute js other ways  e g the onerror attribute

User · Answer

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  lt FORM gt  tag nested within a  lt P gt  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    lt html gt        lt head gt           lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 4 4 jquery min js  gt  lt  script gt               lt script gt                function                         the following two blocks of HTML are identical except the P tag is outside the form in the first case                 var html1     lt p gt  lt form id  form1  gt  lt input type  text  name  field1  value  111    gt  lt div class  foo    gt  lt input type  text  name  field2  value  222    gt  lt  form gt  lt  p gt                    var html2     lt form id  form1  gt  lt p gt  lt input type  text  name  field1  value  111    gt  lt div class  foo    gt  lt input type  text  name  field2  value  222    gt  lt  p gt  lt  form gt                         lt FORM gt  tag nested within  lt P gt                  RunTest   lt FORM gt  tag nested within  lt P gt  tag   html1                      succeeds in Internet Explorer                     RunTest   lt FORM gt  tag nested within  lt P gt  tag with leading newline     n    html1          fails with added new line in Internet Explorer                       lt P gt  tag nested within  lt HTML gt                  RunTest   lt P gt  tag nested within  lt FORM gt  tag   html2                      succeeds in Internet Explorer                 RunTest   lt P gt  tag nested within  lt FORM gt  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 amp 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                                                    lt  script gt       lt  head gt        lt div id  placeholder  gt          This is  placeholder text will       lt  div gt    lt  html gt

User · Answer

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

User · Answer

Here is some code to get you started  You can modify the behavior of  innerHTML -- you could even create your own complete  innerHTML shim   P S   redefining  innerHTML will also work in Firefox  but not Chrome -- they re working on it    if    msie trident  i test navigator userAgent      var innerhtml get   Object getOwnPropertyDescriptor HTMLElement prototype   innerHTML   get  var innerhtml set   Object getOwnPropertyDescriptor HTMLElement prototype   innerHTML   set  Object defineProperty HTMLElement prototype   innerHTML       get  function     return innerhtml get call  this      set  function new html       var childNodes   this childNodes    for  var curlen   childNodes length  i   curlen  i  gt  0  i--        this removeChild  childNodes 0           innerhtml set call  this  new html             var mydiv   document createElement   div   mydiv innerHTML    test  document body appendChild  mydiv   document body innerHTML      console log  mydiv innerHTML    http   jsfiddle net DLLbc 9

User · Answer

innerHTML is not standard and may not work in some browsers  I have used html   in all browsers with no problem

User · Answer

If you re wondering about functionality  then jQuery s  html   performs the same intended functionality as  innerHTML  but it also performs checks for cross-browser compatibility   For this reason  you can always use jQuery s  html   instead of  innerHTML where possible

User · Answer

This method uses the browser s innerHTML property   - jQuery API  http   api jquery com html

[javascript] JQuery html() vs. innerHTML

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to dom

Examples related to innerhtml