it-swarm.com.ru

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

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

1197
Rob Stevenson-Leggett

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

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

1251
nickf

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

Например:

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

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

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

129
Adam Bellaire

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

67
abernier

Я делаю так:

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

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

UPDATE

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

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

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

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

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

Начиная с 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: 88 мс 
 $ ($. parseHTML): 240 мс 
 <div> </ div>: 138 мс 
 <div>: 143 мс 
 createElement: 64ms 

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

28
siergiej
var mydiv = $('<div />') // also works
12
Shimon Doodkin
var div = $('<div/>');
div.append('Hello World!');

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

7
AcidicChip

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

5
ern0

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


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

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