Создание элементов DOM с помощью jQuery

В вашем желании улучшить свой код JavaScript вам интересно использовать функциональность jQuery для упрощения манипуляций с DOM .

jQuery предлагает альтернативные способы создания элементов DOM, как вы заметили с помощью $.create("div"). Однако этот подход не является частью основного API jQuery и не всегда может быть надежным.

Для более эффективного и стандартизированного решения рассмотрите следующее:

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

Этот краткий код выполняет то же самое, что и исходный код JavaScript:

• Создание элемента
  с использованием $('

  ).
• Скрытие с помощью .hide().
• Добавление элемента с помощью $.append(), установка его свойств и добавление класса.

  Результаты бенчмаркинга

  Что касается производительности различных методов создания элементов, тест показал, что document.createElement — самый быстрый. Однако в современных версиях jQuery разница во времени между методами минимальна (например, 3 миллисекунды на тысячу элементов).

  Обновлено для jQuery 1.7.2

  тест был обновлен с помощью jQuery 1.7.2 и доступен по адресу http://jsben.ch/#/ARUtz для дальнейшего изучения и краудсорсинга. результаты.