jQuery document.createElement эквивалент?
5 ответов
вот Ваш пример в "одной" строке.
this.$OuterDiv = $('<div></div>')
.hide()
.append($('<table></table>')
.attr({ cellSpacing : 0 })
.addClass("text")
)
;
Обновление : Я думал, что обновлю это сообщение, так как это все еще получает довольно мало трафика. В комментариях ниже существует некоторое обсуждение [приблизительно 114] по сравнению с $("<div></div>") по сравнению с $(document.createElement('div')) как способ создать новые элементы, и который является "лучшим".
я соединил маленький сравнительный тест , и здесь являюсь примерно результатами повторения вышеупомянутых опций 100,000 раз:
jQuery 1.4, 1.5, 1.6
Chrome 11 Firefox 4 IE9
<div> 440ms 640ms 460ms
<div></div> 420ms 650ms 480ms
createElement 100ms 180ms 300ms
jQuery 1.3
Chrome 11
<div> 770ms
<div></div> 3800ms
createElement 100ms
jQuery 1.2
Chrome 11
<div> 3500ms
<div></div> 3500ms
createElement 100ms
я думаю, что это не большое удивление, но document.createElement самый быстрый метод. Конечно, прежде чем Вы уходите и начинаете осуществлять рефакторинг свою всю кодовую базу, помните, что различия, о которых мы говорим здесь (во всех кроме архаичных версий jQuery) приравниваются приблизительно к дополнительным 3 миллисекундам на тысячу элементов .
Обновление 2
Обновленный для jQuery 1.7.2 и помещенный сравнительный тест на JSBen.ch, который является, вероятно, более научным, чем мои примитивные сравнительные тесты, плюс он может быть crowdsourced теперь!
jQuery из поля не имеет эквивалента createElement. На самом деле большинство работы jQuery сделано внутренне с помощью innerHTML по чистому управлению DOM. Как Adam упомянул выше этого, то, как можно достигнуть подобных результатов.
существуют также плагины, доступные, которые используют DOM по innerHTML как appendDOM, DOMEC и FlyDOM только для именования некоторых. Производительность, мудрая, собственный jQuery является все еще самым производительным (главным образом becasue, это использует innerHTML)
Просто предоставляя HTML элементов Вы хотите добавить к конструктору jQuery $(), возвратит объект jQuery из недавно созданного HTML, подходящего для того, чтобы быть добавленным в DOM использование jQuery append() метод.
, Например:
var t = $("<table cellspacing='0' class='text'></table>");
$.append(t);
Вы могли тогда заполнить эту таблицу программно, если бы Вы желали.
Это дает Вам способность определить любой произвольный HTML, который Вы любите, включая имена классов или другие атрибуты, которые Вы могли бы найти более кратким, чем использование createElement и затем установка атрибутов как cellSpacing и className через JS.
Все довольно просто! Вот пара быстрых примеров ...
var $example = $( XMLDocRoot );
var $element = $( $example[0].createElement('tag') );
// Note the [0], which is the root
$element.attr({
id: '1',
hello: 'world'
});
var $example.find('parent > child').append( $element );
Создание новых элементов DOM является основной функцией метода jQuery () , см .: