jQuery document.createElement эквивалент? - PullRequest
Новая
       35

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

1197 голосов
/ 06 ноября 2008

Я выполняю рефакторинг некоторого старого кода 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 ]

1250 голосов
/ 06 ноября 2008

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

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

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

http://jsben.ch/#/ARUtz

129 голосов
/ 06 ноября 2008

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

Например: 

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

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

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

67 голосов
/ 15 июля 2010

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

41 голосов
/ 24 ноября 2012

Я делаю так: 

$('<div/>',{
    text: 'Div text',
    class: 'className'
}).appendTo('#parentDiv');
40 голосов
/ 24 января 2013

, начиная с 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>​]
35 голосов
/ 18 июня 2013

UPDATE

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

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

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

$(document.createElement('div'), {
    text: 'Div text',
    'class': 'className'
}).appendTo('#parentDiv');
28 голосов
/ 29 сентября 2013

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

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

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

Для связи с актуальным вопросом, приведенный пример можно перевести на: 

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

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

12 голосов
/ 17 ноября 2010 
var mydiv = $('<div />') // also works
7 голосов
/ 23 декабря 2010 
var div = $('<div/>');
div.append('Hello World!');

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

5 голосов
/ 15 августа 2013

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

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

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

В качестве второго параметра можно указать идентификатор узла DOM: 

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

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

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

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

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

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

Страница:
...