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 myItems = [];
var $myList = $( "#myList" );

for ( var i = 0; i < 100; i++ ) {
    myItems.push( "<li>элемент " + i + "</li>" );
}

$myList.append( myItems.join( "" ) );

Попробуйте Сами »

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

Смотрите также
Комментарии
Написать

(обязательно)

(обязательно)

Это не спам (обязательно)