Inicio > jquery, OpenSource > Crear elementos de forma optimizada

Crear elementos de forma optimizada

Lunes, 31 de mayo de 2010 Dejar un comentario Ir a comentarios

Original de Todo Jquery

A la hora de programar en jQuery suelo crear elementos para añadir a la página. Normalmente solía realizar, por ejemplo, los siguientes pasos:

var li = document.createElement(‘li’);
li.id = ‘acerca-de’;
li.innerHTML = ‘Acerca de’;
$(‘#nav’).append(li);


Como veis, estoy creando un nuevo elemento de una lista, asignándole un ID, insertando su html correspondiente y añadiéndolo a una lista que ya tengo con identificador #nav.

Lo bueno que tiene jQuery es que está desarrollado para poder anidar instrucciones, haciendo que cada función devuelva el mismo elemento. De este modo estos pasos quedarían:

var li = $(document.createElement(‘li’)).attr(‘id’,'acerca-de’).html(‘Acerda de’).appendTo(‘#nav’);

Dejando un código mucho más sencillo, limpio y reducido.

Articulos relacionados:

Categories: jquery, OpenSource Tags:
  • Simón

    básico tutorial mi estimado joanin! se agradece ídem

  • kto

    $(‘#nav’).append(‘Acerda de’);

  • http://joserobinson.com jrobinsonc

    También es posible usar:
    $(‘li’)
    que es mas corto y fácil que:
    $(document.createElement(‘li’))

    Por ejemplo:
    var li = $(‘li’).attr(‘id’,'acerca-de’).html(‘Acerda sssde’).appendTo(‘#nav’);

  • neiker

    La sintaxis de MooTools me gusta un poco mas, ya que me parece mas clara:
    new Element([Tipo de elemento],[Atributos])

    Y permite anidar elementos de manera muchos mas sencilla, de hecho, creo que es una de las pocas cosas en las que mootools es mas sencillo que jquery :P
    Un ejemplo:
    http://jsfiddle.net/zFFa7/