Эквивалент 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.

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

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

Обновлять: Я подумал, что обновлю этот пост, так как он все еще получает довольно много трафика. В комментариях ниже есть некоторые дискуссии о $("<div>"), $("<div></div>") и $(document.createElement('div')) как о способе создания новых элементов, который является «лучшим».

Я собрал небольшой ориентир, и вот примерно результаты повторения вышеуказанных опций 100000 раз:

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

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

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

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

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

Создание новых элементов DOM - это основная функция метода jQuery(), см.:

• http://api.jquery.com/jQuery/#creating-new-elements
• и в частности http://api.jquery.com/jQuery/#example-1-1

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

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

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

Я так делаю:

$('<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: 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

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

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

Также это хороший пример простого jQuery-плагина (сотого).

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

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

Relaxed HTML parsing: You can once again have leading spaces or newlines before tags in $(htmlString). We still strongly advise that you use $.parseHTML() when parsing HTML obtained from external sources, and may be making further changes to HTML parsing in the future.

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

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

jQuery 1.9.1

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

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

Не упоминается в предыдущих ответах, поэтому я добавляю рабочий пример того, как создавать элементы элементов с помощью последней версии jQuery, а также с дополнительными атрибутами, такими как контент, класс или обратный вызов 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.info(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>

Как насчет этого, например, если вы хотите добавить элемент <option> внутри <select>

$('<option/>')
  .val(optionVal)
  .text('some option')
  .appendTo('#mySelect')

Очевидно, вы можете применить к любому элементу

$('<div/>')
  .css('border-color', red)
  .text('some text')
  .appendTo('#parentDiv')