Criando elementos DOM com jQuery

Em seu desejo de aprimorar seu código JavaScript, você está curioso para aproveitar a funcionalidade do jQuery para simplificar a manipulação de DOM .

jQuery oferece maneiras alternativas de criar elementos DOM, como você notou com $.create("div"). No entanto, essa abordagem não faz parte da API principal do jQuery e pode nem sempre ser confiável.

Para uma solução mais eficiente e padronizada, considere o seguinte:

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

Este código conciso realiza o mesmo que seu JavaScript original:

• Criando um elemento
  usando $('

  ).
• Ocultando-o com .hide().
• Anexando um elemento com $.append(), definindo suas propriedades e adicionando um class.

  Resultados de benchmarking

  Em relação ao desempenho de diferentes métodos de criação de elementos, um benchmark revelou que document.createElement é o mais rápido. No entanto, as diferenças de tempo entre os métodos são mínimas nas versões modernas do jQuery (por exemplo, 3 milissegundos por mil elementos).

  Atualizado para jQuery 1.7.2

  O benchmark foi atualizado com jQuery 1.7.2 e está disponível em http://jsben.ch/#/ARUtz para exploração adicional e resultados de crowdsourcing.