JQuery document.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

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

1066
06 нояб. '08 в 15:26
источник поделиться
13 ответов

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

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

1149
06 нояб. '08 в 15:34
источник

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

Например:

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

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

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

116
06 нояб. '08 в 15:30
источник

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

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

57
15 июля '10 в 10:14
источник

так как 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>​]
36
24 янв. '13 в 6:01
источник

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

$( document.createElement('div') ,{
    text: 'Div text',
    'class': 'className'
}).appendTo('#parentDiv');
30
18 июня '13 в 8:53
источник

Я делаю так:

$('<div/>',{
    text: 'Div text',
    class: 'className'
}).appendTo('#parentDiv');
28
24 нояб. '12 в 21:07
источник

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

Так как 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

23
29 сент. '13 в 22:01
источник
var mydiv = $('<div />') // also works
11
17 нояб. '10 в 20:03
источник
var div = $('<div/>');
div.append('Hello World!');

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

6
23 дек. '10 в 1:43
источник

Я только что сделал небольшой плагин 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
15 авг. '13 в 17:49
источник

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


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 );
4
25 мая '10 в 20:17
источник

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

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

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

1
28 февр. '13 в 2:59
источник

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

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

0
06 нояб. '08 в 15:35
источник

Посмотрите другие вопросы по меткам или Задайте вопрос