Creación de elementos DOM con jQuery

En su deseo de mejorar su código JavaScript, tiene curiosidad por aprovechar la funcionalidad de jQuery para simplificar la manipulación de DOM .

jQuery ofrece formas alternativas de crear elementos DOM, como habrás notado con $.create("div"). Sin embargo, este enfoque no forma parte de la API principal de jQuery y es posible que no siempre sea confiable.

Para obtener una solución más eficiente y estandarizada, considere lo siguiente:

this.$OuterDiv = $('<div></div>')
    .hide()
    .append($('<table></table>')
        .attr({ cellSpacing : 0 })
        .addClass("text")
    )
;

Este código conciso logra lo mismo que su JavaScript original al:

• Crear un elemento
  usando $('

  ).
• Ocultarlo con .hide().
• Agregar un elemento con $.append(), configurar sus propiedades y agregar un class.

  Resultados de la evaluación comparativa

  Con respecto al rendimiento de diferentes métodos de creación de elementos, una evaluación comparativa reveló que document.createElement es el más rápido. Sin embargo, las diferencias de tiempo entre los métodos son mínimas en las versiones modernas de jQuery (por ejemplo, 3 milisegundos por cada mil elementos).

  Actualizado para jQuery 1.7.2

  El El punto de referencia se actualizó con jQuery 1.7.2 y está disponible en http://jsben.ch/#/ARUtz para una mayor exploración y resultados de colaboración abierta.