Puedo confiar totalmente en jQuery html() método de comportarse idéntica a innerHTML? Hay alguna diferencia entre innerHTML y jQuery html() método? Si estos métodos hacen lo mismo, ¿puedo usar jQuery html() método en lugar de innerHTML?

Mi problema es: yo estoy trabajando ya diseñado las páginas, las páginas que contiene las tablas y en JavaScript, el innerHTML propiedad se utiliza para rellenar dinámicamente.

La aplicación está funcionando bien en Firefox pero Internet Explorer desencadena un error: unknown runtime exception. He usado jQuery html() método y es decir‘s de error ha desaparecido. Pero no estoy seguro de que funciona para todos los navegadores y no estoy seguro de si va a reemplazar todos los innerHTML propiedades con jQuery html() método.

Muchas gracias.

  • el uso de jQuery html(). He tenido problemas con innerHTML en muchas ocasiones. Y html() se funciona en todos los navegadores.
InformationsquelleAutor Bhupi | 2010-08-25

7 Comentarios

  1. 106

    Para responder a su pregunta:

    .html() acaba de llamar .innerHTML después de hacer algunas comprobaciones nodeTypes y esas cosas. También se utiliza una try/catch bloque donde se intenta utilizar innerHTML primero y si eso no funciona, tendrá reserva de gracia para jQuery .empty() + append()

    • Tenga en cuenta que con Internet Explorer 8 (y probablemente antes) el comprobaciones adicionales puede agregar un significativo impacto en el rendimiento para grandes insertos, por lo que si el rendimiento en IE, es importante que usted puede desear considerar el uso de innerHTML directamente.
    • Una breve comparación de rendimiento: jsperf.com/innerhtml-vs-html-vs-empty-append
  2. 17

    Específicamente con respecto a «¿puedo confiar completamente en el momento de jquery html (), método que se va a realizar como innerHTML», mi respuesta es NO!

    Ejecutar esto en internet explorer 7 u 8, y verás.

    jQuery produce mal HTML cuando la configuración de HTML que contiene un <FORM> etiqueta anidada dentro de un <P> etiqueta donde el principio de la cadena es una nueva línea!

    Hay varios casos de prueba aquí y de los comentarios cuando se ejecute debe explicarse por sí misma suficiente. Esto es bastante oscuro, pero no la comprensión de lo que está pasando es un poco desconcertante. Me voy a presentar un informe de error.

    <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>
    • Creo que este informe de error se volvió como me decía que tenía un código HTML no válido con respecto a lo permitido en un <P> etiqueta – o algo así. esto fue hace bastante tiempo así que no estoy seguro si nada ha cambiado, pero esto todavía está recibiendo upvotes 3 años más tarde, así que si alguien tiene algo que añadir, por favor agregar un comentario
    • Esto es todavía aquí en IE9, acabo de probar con eso: $(«body»).html(«<p><form><div>Ver qué hacía allí ?</div></form></p>»);
    • Y de venta de entradas se abre aquí bugs.jquery.com/ticket/7601
  3. 8

    Si usted se está preguntando acerca de la funcionalidad de jQuery .html() realiza la misma la intención de funcionalidad como .innerHTML(), pero también realiza comprobaciones de compatibilidad entre navegadores.

    Por este motivo, siempre que el uso de jQuery, .html() en lugar de .innerHTML() donde sea posible.

    • innerHTML es una propiedad de documento o elemento de propiedad y no un método.
  4. 1

    Dada la apoyo general de .innerHTML en estos días, la única diferencia ahora es que .html() se ejecutar código en cualquier <script> etiquetas si hay alguno en el código html de que usted dé. .innerHTML, bajo HTML5, no.

    De el jQuery docs:

    Por diseño, cualquier jQuery constructor o un método que acepta una cadena HTML — jQuery(), .append(), .después de(), etc. — puede, potencialmente, ejecutar código. Esto puede ocurrir por la inyección de etiquetas de secuencia de comandos o el uso de los atributos de HTML que ejecutar el código (por ejemplo, <img onload="">). No use estos métodos para insertar cadenas obtenidos a partir de fuentes no confiables, tales como parámetros de consulta de URL, cookies, o en forma de entradas. Hacerlo puede introducir cross-site-scripting (XSS) vulnerabilidades. Quitar o escape de cualquier entrada del usuario antes de añadir contenido al documento.

    Nota: tanto .innerHTML y .html() puede ejecutar js otras maneras (e.g el onerror atributo).

    • Muy interesante. Entonces, ¿cómo podemos forzar HTML5 para ejecutar <script> etiquetas cuando se inserta?
    • Es un poco viejo, pero todavía pienso en otra respuesta de la solución funcionaría bien en la actualidad. Usted podría, por supuesto, sólo uso .html() si estás usando jQuery.
    • Ahora que lo miro de nuevo, que la respuesta no te pierdas el paso de análisis de script etiquetas de una mayor fragmento de html. Tal vez una nueva pregunta/respuesta está en orden?
  5. 0

    Aquí está el código para empezar. Usted puede modificar el comportamiento de .innerHTML — usted puede incluso crear su propio completo .innerHTML calza. (P. S.: la redefinición .innerHTML también funciona en Firefox, pero no en Chrome — que estamos trabajando en ello.)

    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 > 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/

Dejar respuesta

Please enter your comment!
Please enter your name here