jQuery HTML() y de cierre automático etiquetas

Question

Si bien la creación de elementos de auto-cerrado con jQuery html() el problema siguiente ocurre:

$('#someId').html('<li><input type="checkbox" /></li>') 

creará

<li><input type="checkbox"></li> 

Se cierra correctamente la etiqueta <li> pero no el <input>

Parece ser un problema de innerHTML que se utiliza en la función html().

he buscado por todas partes y ha encontrado una solución para esto, pero la página ya no está disponible como puede ver en: http://dev.jquery.it/ticket/3378

Alguien sabe cómo solucionar este problema?

Answer 1

Para aclarar, esto es HTML válido:

<input type="checkbox"> 

y esto es XML válido (incluyendo XHTML):

<input type="checkbox"/> 

pero es no HTML válido. Habiendo dicho eso, la mayoría de los navegadores probablemente lo acepten de todos modos (pero el documento no validará la validación si eso significa algo para usted).

html() utiliza innerHTML. En IE y posiblemente en otros navegadores esto tiene problemas porque XHTML todavía está modelado como un DOM HTML. Ver Internal IE-HTML DOM still isn’t XHTML compliant.

Básicamente, hay muy pocas razones para usar XHTML. Es una pesadilla de navegador cruzado. Para obtener una sinopsis detallada de por qué ver XHTML - Is writing self closing tags for elements not traditionally empty bad practise?, particularmente la primera respuesta.

Answer 2

En la era de HTML5, se podría argumentar que <input type="checkbox"> y <input type="checkbox" /> son representaciones igualmente válidas del mismo elemento vacío.

Si bien esto es cierto, la razón innerHTML todavía serializa los elementos vacío sin la /> es doble:

• Un elemento vacío es un elemento vacío, independientemente de la forma en que representarla en el navegador. En el momento en que el navegador ha construido el elemento, su marcado es irrelevante, y en lo que respecta al DOM, lo que es es un input tipo de elemento de casilla de verificación. El único lugar donde la "etiqueta" del elemento es relevante es su propiedad tagName y even that has its own quirk.

• No hay razón alguna para que un navegador para empezar serialización de un elemento vacío con la sintaxis /> cuando sí HTML5, en virtud de estar basado en HTML, XML, no, no lo requiere. Hacerlo simplemente porque es igualmente válido utilizar la sintaxis /> rompe innecesariamente la compatibilidad con los sitios heredados con una ganancia absoluta cero (porque la presencia del /> no cambia el significado de la salida de ninguna manera). Lo que nos lleva de vuelta a la respuesta de Cletus que distingue entre el marcado HTML y el marcado XHTML.

innerHTML, y por extensión jQuery.html(), fue diseñado para darle una representación HTML del contenido de un elemento del DOM . Es no diseñado para darle el marcado HTML que utilizó el navegador para construir el elemento en el DOM. No se puede "arreglar" esto porque no hay nada que arreglar para empezar. Lo que debe hacer es evitar depender del elemento innerHTML para cualquier cosa que no sea quizás la sesión de depuración ocasional.

Consulte también: Nested <p> tag auto-closing/opening