javascript - sheets - jquery $(''<div>'') vs $(''<div/>'')
sparkline google sheets (4)
Ambas variantes te dan el mismo resultado pero esto
$(''<div />'', {id:"myID",class:"mycssClass class2 clazzz",some-attribute: "value"});
es mejor, mas legible que
$(''<div id="myId" class="mycssClass class2 clazzz" some-attribute="value"></div>'');
Posible duplicado:
$ (''<elemento>'') vs $ (''<elemento />'') en jQuery
Cuál de estos dos es la forma correcta de hacerlo:
$(''<div>'')
o
$(''<div />'')
Ambos parecen funcionar. ¿Es una forma más correcta que la otra, o ambas siempre funcionan?
Aunque parece que producen un resultado idéntico, pero en función de los usos no pueden generar el mismo resultado. Por ejemplo:
Mientras jQuery analiza $(''<div> <p>'')
, la etiqueta <p>
será un elemento secundario de la etiqueta <div>
, por lo que el resultado sería: <div> <p></p> </div>
Y mientras jQuery analiza $(''<div/> <p/>'')
, la etiqueta <p/>
será un hermano de la <div/>
, por lo que el resultado sería: <div></div> <p></p>
Producen resultados idénticos en jQuery.
De los docs :
Si se pasa una cadena como parámetro a $ (), jQuery examina la cadena para ver si parece HTML (es decir, tiene
<tag ... >
algún lugar dentro de la cadena). Si no, la cadena se interpreta como una expresión de selector, como se explicó anteriormente. Pero si la cadena parece ser un fragmento de código HTML, jQuery intenta crear nuevos elementos DOM como se describe en el código HTML. Luego se crea y se devuelve un objeto jQuery que hace referencia a estos elementos. Puede realizar cualquiera de los métodos jQuery habituales en este objeto:
$(''<p id="test">My <em>new</em> text</p>'').appendTo(''body'');
Si el HTML es más complejo que una sola etiqueta sin atributos, como se muestra en el ejemplo anterior, la creación real de los elementos se realiza mediante el mecanismo internoHTML del navegador. En la mayoría de los casos, jQuery crea un nuevo elemento y establece la propiedad innerHTML del elemento en el fragmento HTML que se pasó. Cuando el parámetro tiene una etiqueta única, como
$(''<img />'') or $(''<a></a>'')
, jQuery crea el elemento utilizando la función createElement () de JavaScript nativa.
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>'');