Jquery crear elementos

Hola a todos, a la hora de crear un elemento qué es mejor:

var capaDiasSemana = $('<div class="diassemana"></div>');

o esto:

var capaDiasSemana = $('<div/>');
capaDiasSemana.addClass('diassemana');

Un saludo

Respuestas

Desconozco cuál es la mejor forma de hacerlo en relación a consumo de memoria y CPU, aunque sospecho que si no abusas de la creación de elementos, las diferencias serán despreciables.

Respecto a la forma más elegante de hacerlo o la forma que más fácilmente se va a poder mantener en el futuro, la segunda opción sería mejor. El problema de la primera opción es que estás enterrando los atributos HTML dentro de una cadena de texto y así es fácil que pases por alto alguno de ellos cuando hagas cambios. En este caso tan sencillo igual no se ve tan claro, pero si el trozo de código HTML es largo, es casi seguro que te puede causar problemas en el futuro.

En cualquier caso, mi sugerencia sería utilizar una tercera forma que a mí personalmente me resulta más elegante y clara:

var capaDiasSemana = $('<div/>', { 'class': 'diassemana' });

Cuando tienes muchos atributos, o cuando sus valores son dinámicos, el código resulta muy claro:

var capaDiasSemana = $('<div/>', {
    'class' : 'diassemana',
    'id'    : 'id_' + user.id
});

@javiereguiluz

10 diciembre 2013, 8:46

:o, no sabía que se podía hacer así, si, lo veo más claro a la hora de mantener la aplicación.

Muchas gracias!!!!!!!!!!!

@AlbertoVioque

11 diciembre 2013, 10:35

¿De esta formas se pueden crear options para rellenar un select? Os cuento mi caso, estoy intentando pillar una lista de enlaces de un menú para meterlos en un select para la versión móvil de la web y no encuentro la forma de construir los options. Paso el código.

Muchas gracias

<!-- código HTML -->
 
<!-- Elementos que quiero copiar -->
<div class="panel-group" id="menu-lista-md">    
    <div class="panel">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="/enlace1">
                    Enlace 1
                </a>
            </h4>
        </div>
    </div>
 
    <div class="panel">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="/enlace2">
                    Enlace 2
                </a>
            </h4>
        </div>
    </div>
</div>
 
<!-- Lugar donde los quiero copiar -->
<div class="" id="menu-lista-xs"><select class="form-control"><option></option></select></div>

var menuListaMd = $ ('#menu-lista-xs select');
 
$ ('#menu-lista-md a').each (function () {
        var option = $ ('</option>');
 
        option.val ($(this).attr ('href'));
        option.html ($(this).html ());
 
        menuListaMd.append (option);
    })
 
    $ ('#menu-lista-xs').append (menuListaMd);

@_JoseGuisado_

18 abril 2015, 18:38