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та встановлення атрибутів типу JS 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")
    )
;

що, на жаль, менш зручно, ніж використовувати просто $(), але це дає вам більше контролю, наприклад, ви можете виключити теги сценаріїв (він залишить вбудовані сценарії на зразок 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>: 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 можна вказати як другий параметр:

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

У попередніх відповідях не згадується, тому я додаю робочий приклад того, як створювати елементи елементів за допомогою останнього 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.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 над внутрішніми HTMLML , такими як appeDDOM , DOMEC і FlyDOM . Ефективність з рідним jquery як і раніше є найбільш ефективною (в основному тому, що він використовує innerHTML)