эквивалент jQuery document.createElement?

1066

Я рефакторинг старого кода JavaScript, и там много манипуляций с DOM.

var d = document;
var odv = d.createElement("div");
odv.style.display = "none";
this.OuterDiv = odv;

var t = d.createElement("table");
t.cellSpacing = 0;
t.className = "text";
odv.appendChild(t);

Я хотел бы знать, есть ли лучший способ сделать это с помощью jQuery. Я экспериментировал с:

var odv = $.create("div");
$.append(odv);
// And many more

Но я не уверен, что это лучше.

  • 0
    jsben.ch/#/ARUtz - тест для jquery и createElement
  • 0
    Возможный дубликат создания элемента div в jQuery
Показать ещё 1 комментарий
Теги:
dom
dhtml

13 ответов

1206
Лучший ответ

вот ваш пример в строке "один".

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

Обновление: я думал, что обновляю этот пост, так как он по-прежнему получает довольно много трафика. В приведенных ниже комментариях обсуждается вопрос о $("<div>") vs $("<div></div>") vs $(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, который, вероятно, немного более научен, чем мои примитивные тесты, а также теперь можно использовать краудсорсинг!

http://jsben.ch/#/ARUtz

  • 69
    Вы обнаружите, что document.createElement намного быстрее, чем jQuery, преобразующий вашу HTML-строку в элемент. (на всякий случай, если у вас есть желание сделать вещи более эффективными)
  • 25
    Это верно для jQuery <1,3 Это скорость эквивалентна теперь, я верю.
Показать ещё 26 комментариев
121

Простое предоставление HTML элементов, которые вы хотите добавить в конструктор jQuery $(), вернет объект jQuery из недавно созданного HTML, подходящего для добавления в DOM с использованием метода jQuery append().

Например:

var t = $("<table cellspacing='0' class='text'></table>");
$.append(t);

После этого вы можете заполнить эту таблицу программно, если хотите.

Это дает вам возможность указать любой произвольный HTML, который вам нравится, включая имена классов или другие атрибуты, которые могут быть более краткими, чем использование createElement, а затем установка атрибутов типа cellSpacing и className через JS.

  • 7
    Может быть, это было очевидно и показано в вашем примере, но создание элемента DOM jQuery с использованием синтаксиса $ ("<html string>") невозможно добавить в DOM с помощью собственного метода <element> .appendChild или аналогичного. Вы должны использовать метод добавления jQuery.
  • 4
    $(htmlStr) реализован как document.createElement("div").innerHTML = htmlStr . Другими словами, он вызывает HTML-анализатор браузера. Неверно сформированный HTML по-разному ломается в IE и других браузерах.
Показать ещё 3 комментария
55

Создание новых элементов DOM является основной особенностью метода jQuery(), см.:

Приветствия.

  • 16
    Спасибо за ссылку на документ! $('<a>') не гуглится!
37

так как jQuery1.8, использование $.parseHTML() для создания элементов - лучший выбор.

есть два преимущества:

1.Если вы используете старый способ, который может быть чем-то вроде $(string), jQuery проверит строку, чтобы убедиться, что вы хотите выбрать тег html или создать новый элемент. Используя $.parseHTML(), вы указываете jQuery, что вы хотите явно создать новый элемент, поэтому производительность может быть немного лучше.

2. Еще важнее то, что вы можете столкнуться с атакой через сайт (подробнее), если вы используете старый способ. если у вас есть что-то вроде:

    var userInput = window.prompt("please enter selector");
    $(userInput).hide();

Плохой парень может ввести <script src="xss-attach.js"></script>, чтобы дразнить вас. к счастью, $.parseHTML() избегайте этого смущения для вас:

var a = $('<div>')
// a is [<div>​</div>​]
var b = $.parseHTML('<div>')
// b is [<div>​</div>​]
$('<script src="xss-attach.js"></script>')
// jQuery returns [<script src=​"xss-attach.js">​</script>​]
$.parseHTML('<script src="xss-attach.js"></script>')
// jQuery returns []

Однако обратите внимание, что a является объектом jQuery, а b является элементом html:

a.html('123')
// [<div>​123​</div>​]
b.html('123')
// TypeError: Object [object HTMLDivElement] has no method 'html'
$(b).html('123')
// [<div>​123​</div>​]
  • 1
    +1 за различие между a и b
  • 0
    «Лучший выбор» для «создания [любого] элемента» может быть сильным. Ответ @ siergiej говорит о том, что parseHTML хорош для html, поступающего из внешних источников, но что « весь импульс исчез после упаковки результатов в новый объект jQuery ». То есть, если вы хотите жестко запрограммировать создание нового html-элемента в jQuery-стиле, стиль $("<div>stuff</div>") похоже, по-прежнему выигрывает.
29

Я чувствую, что использование document.createElement('div') вместе с jQuery выполняется быстрее:

$( document.createElement('div') ,{
    text: 'Div text',
    'class': 'className'
}).appendTo('#parentDiv');
27

Я делаю так:

$('<div/>',{
    text: 'Div text',
    class: 'className'
}).appendTo('#parentDiv');
23

Хотя это очень старый вопрос, я подумал, что было бы неплохо обновить его с помощью последней информации;

Так как jQuery 1.8 существует функция jQuery.parseHTML(), которая теперь является предпочтительным способом создания элементов. Кроме того, есть некоторые проблемы с разбором HTML через $('(html code goes here)'), например, официальный сайт jQuery упоминает следующее в одном из своих примечаний к выпуску:

Расслабленный синтаксический анализ HTML: вы можете снова иметь ведущие пробелы или newlines перед тегами в $(htmlString). Мы по-прежнему настоятельно рекомендуем вы используете $.parseHTML() при анализе HTML, полученного из внешних источников и может вносить дополнительные изменения в разбор HTML в будущее.

Чтобы иметь отношение к реальному вопросу, приведенный пример можно перевести на:

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

что, к сожалению, менее удобно, чем просто $(), но это дает вам больше контроля, например, вы можете исключить теги script (он оставит встроенные скрипты, например onclick):

> $.parseHTML('<div onclick="a"></div><script></script>')
[<div onclick=​"a">​</div>​]

> $.parseHTML('<div onclick="a"></div><script></script>', document, true)
[<div onclick=​"a">​</div>​, <script>​</script>​]

Кроме того, здесь контрольный показатель от верхнего ответа настроен на новую реальность:

JSbin Link

jQuery 1.9.1

  $.parseHTML:    88ms
  $($.parseHTML): 240ms
  <div></div>:    138ms
  <div>:          143ms
  createElement:  64ms

Похоже, что parseHTML намного ближе к createElement, чем $(), но все ускорения исчезли после переноса результатов в новый объект jQuery

11
var mydiv = $('<div />') // also works
6
var div = $('<div/>');
div.append('Hello World!');

Является самым коротким/простым способом создания элемента DIV в jQuery.

4

Я только что сделал небольшой плагин jQuery для этого: https://github.com/ern0/jquery.create

Это следует за вашим синтаксисом:

var myDiv = $.create("div");

DOM node Идентификатор может быть указан как второй параметр:

var secondItem = $.create("div","item2");

Это серьезно? Нет. Но этот синтаксис лучше, чем $( "<div> </div> " ), и это очень хорошее значение для этих денег.

Я новый пользователь jQuery, переключившись с DOMAssistant, который имеет аналогичную функцию: http://www.domassistant.com/documentation/DOMAssistantContent-module.php

Мой плагин проще, я думаю, что attrs и контент лучше добавлять по методам цепочки:

$("#container").append( $.create("div").addClass("box").html("Hello, world!") );

Кроме того, это хороший пример для простого jQuery-плагина (100-й).

4

Все довольно прямолинейно! Вот несколько быстрых примеров...


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 );
1

Кажется, что создание элемента дойдет до вас. Как только вы начнете цепочку, разница в производительности незначительна.

http://jsperf.com/jquery-dom-node-creation

Я что-то пропустил?

0

jQuery из коробки не имеет эквивалента элемента createElement. Фактически большинство jQuery-работ выполняются внутренне с помощью innerHTML поверх чистой манипуляции с DOM. Как упомянул Адам, вы можете добиться аналогичных результатов.

Существуют также доступные плагины, которые используют DOM поверх innerHTML, например appendDOM, DOMEC и FlyDOM, чтобы назвать несколько. Производительность мудрая, встроенный jquery по-прежнему является наиболее эффективным (главным образом потому, что он использует innerHTML)

  • 5
    Вы должны получить в курсе. jQuery не использует innerHtml, но анализирует строку HTML и внутренне создает дерево DOM, используя document.createElement (). Это ядро JQuery.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню