Создание элементов

Начнём с создания элементов для последующей работы с ними. Документация нам заботливо сообщает, что тут всё просто:

var $myDiv = $('<div id="my" class="some"></div>');

Этот пример вполне рабочий, да вот только производительностью он блистать не будет, ведь внутри будет всё это разбираться с помощью метода «jQuery.parseHTML()», который совсем не быстрый. Но мы можем помочь парсеру, если атрибуты элемента будем передавать вторым параметром:

var $myDiv = $('<div>', {'id':'my', 'class':'some'});

Можем сделать ещё проще:

var $myDiv = $('<div>').attr({'id':'my', 'class':'some'});

И этот способ будет работать капельку быстрее. Но почему? Для того, чтобы ответить на данный вопрос, загляните в код jQuery, в самую главную функцию «init()». В её коде можно найти алгоритм разбора предыдущего примера:

1. Парсим строку, и создаём DOM-элемент в jQuery-обёртке
2. Заходим в цикл обработки переданных параметров:
   1. Проверяем, а нет ли функции у нашего элемента с таким названием
   2. Если нет, то устанавливаем атрибут элемента, используя метод «.attr()»

Выводы делайте сами, гдe мы тут время потеряли :)

Ну и напоследок опишу самый быстрый способ, который я часто использую:

var myDiv = document.createElement('div');

myDiv.id = 'my';
myDiv.className = 'some';

Да, это «чистый» JavaScript, но как по мне – в данном случае он не менее удобен любых фреймворков.