jQuery - Создание Новых Элементов

jQuery предлагает тривиальный и изящный способ создавать новые элементы, используя тот же самый метод $(), применяемый, чтобы делать выборки:

// Создание новых элементов из HTML строки.
$( "<p>Это новый параграф</p>" );
$( "<li class=\"new\">новый элемент списка</li>" );

// Создание нового элемента с объектным атрибутом.
$( "<a/>", {
    html: "Это <strong>новая</strong> ссылка",
    "class": "new",
    href: "foo.html"
});

Отметьте атрибутивный объект во втором параметре выше, а также имя свойства class, заключенное в кавычки классы, тогда как имена свойств text и href - нет. Имена свойств обычно не должны заключаться в кавычки, если они не являются зарезервированными словами (как class в этом случае).

Когда Вы создаете новый элемент с jQuery, он не сразу добавляется к странице. Есть несколько способов добавить элемент на страницу, как только она была создана.

Создаваемый элемент не обязательно должен быть сохранен в переменной – можно вызвать метод, чтобы добавить элемент на страницу, прямо после $(). Однако, в большинстве случаев Вам потребуется ссылка на элемент, который Вы добавили, так чтобы не пришлось выбрать его позже.

Можно также создать элемент, когда Вы добавляете его в страницу, но отметьте, что в этом случае Вы не получаете ссылку на недавно созданный элемент:

Синтаксис для добавления новых элементов на страницу простой, таким образом, это искушает забыть, что имеется огромная стоимость производительности для того, чтобы периодически добавлять в DOM. Если Вы добавлять много элементов в тот же самый контейнер, то Вам следует связать весь HTML в одну строку, и затем добавить эту строку к контейнеру, вместо того, чтобы добавлять элементы по одному. Используйте массив, чтобы собрать все куски вместе, а затем соединить их в одну строку для добавления:

Далее: Как я извлекаю собственный элемент DOM из объекта jQuery?