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

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

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, но как по мне – в данном случае он не менее удобен любых фреймворков.