документ на jQuery.метод createElement эквивалент?

Я рефакторинг некоторого старого кода 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

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

13 ответов


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

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 миллисекундам в тысяча элементов!--13-->.

обновление 2

обновлено для jQuery 1.7.2 и поставило бенчмарк на JSBen.ch, который, вероятно, немного более научный, чем мои примитивные эталоны, плюс его можно использовать сейчас!

http://jsben.ch/#/ARUtz


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

например:

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

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

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


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


С 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>​]

Я делаю так:

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

обновление

начиная с последних версий jQuery, следующий метод не присваивает свойства, переданные во втором объекте

предыдущий ответ

Я чувствую, с помощью document.createElement('div') вместе с jQuery быстрее:

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

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

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

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

чтобы относиться к фактическому вопросу, при условии, что пример может быть переведен на:

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

что, к сожалению, менее удобно, чем использование just $(), но это дает вам больше контроля, например, вы можете выбрать исключить теги скриптов (он оставит встроенные скрипты, такие как 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 Ссылку

jQuery 1.9.1

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

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


var mydiv = $('<div />') // also works

var div = $('<div/>');
div.append('Hello World!');

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


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


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

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

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

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

DOM Node ID может быть указан в качестве второго параметра:

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

это серьезно? Нет. Но этот синтаксис лучше, чем $("

"), и это очень хорошее соотношение цены и качества.

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

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

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

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


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

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

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


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

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