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

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

Например:

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

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

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

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

• http://api.jquery.com/jQuery/#creating-new-elements
• и особенно http://api.jquery.com/jQuery/#example-1-1

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

так как 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>​]

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

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

Я делаю так:

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

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

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

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

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

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

Я только что сделал небольшой плагин 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-й).

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

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

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

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

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

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

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