jQuery - Создание Новых Элементов
jQuery предлагает тривиальный и изящный способ создавать новые элементы, используя тот же самый метод $()
, применяемый, чтобы делать выборки:
// Создание новых элементов из HTML строки.
$( "<p>Это новый параграф</p>" );
$( "<li class=\"new\">новый элемент списка</li>" );
// Создание нового элемента с объектным атрибутом.
$( "<a/>", {
html: "Это <strong>новая</strong> ссылка",
"class": "new",
href: "foo.html"
});
Отметьте атрибутивный объект во втором параметре выше, а также имя свойства class, заключенное в кавычки классы, тогда как имена свойств text
и href
- нет. Имена свойств обычно не должны заключаться в кавычки, если они не являются зарезервированными словами (как class
в этом случае).
Когда Вы создаете новый элемент с jQuery, он не сразу добавляется к странице. Есть несколько способов добавить элемент на страницу, как только она была создана.
Пример
var $myNewElement = $( "<p>Новый элемент</p>" );
$myNewElement.appendTo( "#content" );
$myNewElement.insertAfter( "ul:last" );
// Это удалит p из #content!
$( "ul" ).last().after( $myNewElement.clone() );
// Клонирование p, так что теперь у нас их два.
Попробуйте Сами »
Создаваемый элемент не обязательно должен быть сохранен в переменной – можно вызвать метод, чтобы добавить элемент на страницу, прямо после $()
. Однако, в большинстве случаев Вам потребуется ссылка на элемент, который Вы добавили, так чтобы не пришлось выбрать его позже.
Можно также создать элемент, когда Вы добавляете его в страницу, но отметьте, что в этом случае Вы не получаете ссылку на недавно созданный элемент:
Пример
// на страницу в то же время.
$( "ul" ).append( "<li>list item</li>" );
Попробуйте Сами »
Синтаксис для добавления новых элементов на страницу простой, таким образом, это искушает забыть, что имеется огромная стоимость производительности для того, чтобы периодически добавлять в DOM. Если Вы добавлять много элементов в тот же самый контейнер, то Вам следует связать весь HTML в одну строку, и затем добавить эту строку к контейнеру, вместо того, чтобы добавлять элементы по одному. Используйте массив, чтобы собрать все куски вместе, а затем соединить их в одну строку для добавления:
Пример
var $myList = $( "#myList" );
for ( var i = 0; i < 100; i++ ) {
myItems.push( "<li>элемент " + i + "</li>" );
}
$myList.append( myItems.join( "" ) );
Попробуйте Сами »
Далее: Как я извлекаю собственный элемент DOM из объекта jQuery?