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

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

Вот ваш пример в строке «один».

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

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

Например:

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

Я делаю так:

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

поскольку 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>​]

ОБНОВИТЬ

Начиная с последних версий 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)'), например, официальный сайт 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 Link

JQuery 1.9.1

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

Похоже , что 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 может быть указан как второй параметр:

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-плагина (сотого).

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

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, также с дополнительными атрибутами, такими как обратный вызов content, class или onclick:

const mountpoint = 'https://jsonplaceholder.typicode.com/users'

const $button = $('button')
const $tbody = $('tbody')

const loadAndRender = () => {
  $.getJSON(mountpoint).then(data => {

    $.each(data, (index, { id, username, name, email }) => {
      let row = $('<tr>')
        .append($('<td>', { text: id }))
        .append($('<td>', {
          text: username,
          class: 'click-me',
          on: {
            click: _ => {
              console.log(name)
            }
          }
        }))
        .append($('<td>', { text: email }))

      $tbody.append(row)
    })

  })
}

$button.on('click', loadAndRender)

.click-me {
  background-color: lightgrey
}

<table style="width: 100%">
  <thead>
    <tr>
      <th>ID</th>
      <th>Username</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
  
  </tbody>
</table>

<button>Load and render</button>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

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

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