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

Ответ 1

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

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

Ответ 2

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

Например:

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

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

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

Ответ 3

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

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

Ответ 4

Я делаю так:

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

Ответ 5

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

Ответ 6

ОБНОВИТЬ

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

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

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

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

Ответ 7

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

Начиная с 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.

Ответ 8

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

Ответ 9

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

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

Ответ 10

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

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

Ответ 11

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

Ответ 12

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

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

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

Ответ 13

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

Ответ 14

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

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