Как лучше создавать новые элементы?

Question

1. jQuery('body').append('<div id="my-div" style="background: #fff">my text</div>');
2. jQuery('<div/>').attr('id', 'my-div').css('background', '#fff').html('my text');
3. jQuery('<div/>', {id: 'my-div', html: 'my text', css: {background: '#fff'}});

Так что это лучший способ? Может быть, у вас есть что-то еще?

Answer 1

Третье решение является самым кратким, самым легким для чтения и распространения, и обычно считается самым чистым, хотя второе, которое не требует итерации по свойствам, может быть немного быстрее.

Первый из них медленнее, поскольку он просит браузер проанализировать HTML (а также потому, что он добавляет только один элемент в DOM, как заметил Ян).

Вот тест производительности: http://jsperf.com/add-element

Но вы можете сделать, как вам нравится, на самом деле. Даже разница в скорости редко имеет значение здесь.

Answer 2

Я хотел бы использовать:

jQuery('<div/>').attr({'id': 'my-div', 
         'class': 'my-class'}) 
       .css({'background': '#fff', 
         'color':'#000'}) 
       .html('my text'); 

Answer 3

я думаю NR.3

1.), если вы хотите изменить или получить доступ к DIV, вы должны вызвать селектор после Append!

2.) много вызовов методов, но и во всем определениям Jquery

3.) самый быстрый метод, с одной meethod вызова

Вы забыли позвонить jQuery('body').append(yourGeneratedDiv); после 2) и 3.) раствор

Answer 4

Вот мое мнение. Если кто-то неправильно меня исправит. Например, если я получаю полную строку HTML, я использую первую, потому что она будет быстрее. Например, если я получаю конфигурацию элемента из разных источников, например, вы можете сказать, что модель в MVC, из которой вы фактически создаете элемент, тогда 2-й 3-й метод удобен. Второй и третий методы почти одинаковы. Во втором методе вы просто используете цепочку, но это сделает вещи более грязными. Это очень медленнее, чем просто добавление HTML, как в первом методе. 3-й метод будет просто перебирать все свойства переданного объекта и строить его. Но если вы хотите сделать то же самое с помощью чистого JavaScript, вот код

var div = document.createElement('div'); 
div.innerHTML = "Your HTML Content"; 
div.id = "someID"; 
div.cssText = "Your CSS Code" // or you can use below way 
var divStyle = div.style; 
divStyle['background-color'] = "#CCC" // Like this 
document.getElementById('parentDIV').appendChild(div); 

Here является сравнение скорости между способом Jquery и нативного пути
Но опять же,

Если вы добавляете много виджетов на fly, мое предложение - создать HTML-контент на основе конфигурации и использовать innerHTML, это очень быстро, чем appendChild каждый раз. Я проверял и наблюдал это.

Мое предложение было бы, пожалуйста, избегать jQuery всякий раз, когда это на самом деле не нужно, я согласен, что это мощная библиотека DOM когда-либо, но применяя там, где на самом деле она не нужна, ваша производительность будет уменьшена.