remove - $(''<elemento>'') vs $(''<elemento/>'') en jQuery

jquery remove class

Question

Veo personas que crean elementos HTML en jQuery de dos maneras diferentes:

$(''<element>'')

y

$(''<element />'')

Tengo curiosidad por cuál es "más correcto". Considero que la ventaja obvia del primero es que simplemente es menos que escribir. ¿Hace alguna diferencia cuál se usa?

Answer 1

Corrí ambos en jsperf y encontré diferencias mínimas entre los dos para el rendimiento, así que supongo que terminaría siendo una cuestión de preferencia, y qué elemento está creando. A lo que recomendaría ejecutar más pruebas en jsperf.

Preguntas frecuentes sobre jsperf: http://jsperf.com/faq

resultado final: prueba jsperf

Answer 2

Esto es lo que dicen los documentos de jQuery :

Para garantizar la compatibilidad multiplataforma, el fragmento debe estar bien formado. Las etiquetas que pueden contener otros elementos deben emparejarse con una etiqueta de cierre:

$(''<a href="http://jquery.com"></a>'');

Alternativamente, jQuery permite la sintaxis de etiquetas similares a XML (con o sin un espacio antes de la barra):

$(''<a/>'');

Las etiquetas que no pueden contener elementos pueden cerrarse rápidamente o no:

$(''<img />''); $(''<input>'');

Vea esta pregunta, sin embargo, sobre lo que es más eficiente:

¿Cuál es la forma más eficiente de crear elementos HTML utilizando jQuery?

Answer 3

No hay diferencia, como se ve en el código fuente, línea 30 y línea 121 :

/* Line 30*/
rsingleTag = /^<(/w+)/s*//?>(?:<///1>)?$/,
/* Line 121 */
// If a single string is passed in and it''s a single tag
// just do a createElement and skip the rest
ret = rsingleTag.exec( selector );

Los siguientes son equivalentes:

• <a></a>
• <a />
• <a>

Answer 4

No, no hace ninguna diferencia, siempre que la definición del elemento esté bien formada. El segundo estilo es simplemente una sintaxis alternativa que puede guardar pulsaciones de teclas:

$(''<a href="herp.derp.com/sherp"/>''); // XML-like syntax
$(''<a href="herp.derp.com/sherp"></a>''); // Well-formed HTML
$(''<a href="herp.derp.com/sherp">''); // Malformed (no closing tag)

Answer 5

Técnicamente $(''<element></element>'') es más correcto, ya que las etiquetas de cierre automático que usan / se eliminaron en HTML5, sin embargo, no hacen ninguna diferencia, ya que jQuery analiza esa afirmación. En todo caso, solo usar $(''<element>'') podría ser un poco más rápido, ya que es menos caracteres para leer. Lo que debería saltarse algunas condiciones Regex también.

Mejor aún, si está buscando la forma más rápida posible utilizando jQuery:

var temp = new jQuery.fn.init();
temp[0] = document.createElement(''element'');
temp.length = 1;

Esta versión es la más rápida, porque omite jQuery() que contiene "new jQuery.fn.init ()", y no pasa argumentos para que devuelva inmediatamente un nuevo objeto jQuery. Omite muchas condiciones y declaraciones a prueba de fallas, que son innecesarias si ya sabe exactamente lo que está tratando de hacer.

O un poco más corto:

var temp = $(document.createElement(''element''));

Esta versión es un poco más lenta, pero mucho más fácil de leer, y mucho más limpia. Todavía se omite una gran parte del código utilizado para analizar el, lo que sería una cadena que se pasa. En su lugar, jQuery puede saber automáticamente que estamos trabajando con un nodo aquí.

Referencia
HTML5 NO permite etiquetas de "cierre automático"
Google: html5 etiquetas de cierre automático
jsperf

Answer 6

Un elemento de taquigrafía <element /> requiere una barra inclinada porque reemplaza a <element> </element> . Así que lo escribirías donde sea apropiado por el bien de un marcado válido. Pero no se requiere que sea de una manera u otra.

Editado : este no es realmente el problema. otros aquí parecen estar de acuerdo en que es una cuestión de rendimiento de expresiones regulares