jQuery: как создать элемент (несколько способов)

Используем функцию append()

Создание новых элементов на jQuery можно осуществить несколькими путями. Самый простой из них, это использовать функцию append() (прибавить). Предположим, что у нас есть некий DIV, внутри которого тоже есть пара элементов, и необходимо создать ещё один, третий.

<div id="main">
<div id="first"></div>
<div id="second"></div>
</div>

Если необходимо создать пустой DIV:

$(''#main'').append(''<div />'');

Если необходимо создать элемент с заданными атрибутами или текстом:

$(''#main'').append(''<div id="third">Третий</div>'');

Поскольку в родительском контейнере уже есть несколько элементов, то новый элемент будет в конец родителя, то есть после second:

<div id="main">
<div id="first"></div>
<div id="second"></div>
<div id="third">Третий</div>
</div>

Используем функцию appendTo()

Можно пойти и другим путём, использовав немножко другую функцию, которая называется appendTo() (добавить к). Её отличие в том, что она вызывается не с родительского элемента, а с того, который будет добавлен. То есть эта функция как бы противоположна предыдущей. Результат выполнения следующего кода будет полностью идентичен предыдущему:

$(''<div id="third">Третий</div>'').appendTo(''#main'');

В чём же отличия, спросите Вы? Разница между append() и appendTo() заключается в логике цепочки вызовов. Многие функции jQuery возвращают объект типа jQuery для того, чтобы можно было удобно и компактно продолжить выполнять действия над ними. Взгляните на следующие 2 случая:

// Случай 1
$(''#main'').append(''<div id="third">Третий</div>'').css(''background'', ''red'');
// Случай 2
$(''<div id="third">Третий</div>'').appendTo(''#main'').css(''background'', ''red'');

В первом случае функция append() вернёт объект с ID main, то есть родителя, а затем именно к нему будет прибавлено новое CSS-свойство. Во втором случае функция appendTo() будет возвращать новосозданный элемент, и CSS-свойство будет применено только к нему.

Имейте ввиду, что описанными выше функциями можно не только создавать, а и перемещать уже существующие элементы, например, от одного родителя к другому. Пусть есть следующий HTML:

<div id="main">
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
</div>

Если мы хотим переместить 4-й элемент внутрь третьего, выполнить следующий код:

$(''#fourth'').appendTo(''#third'');

Получим:

<div id="main">
<div id="first"></div>
<div id="second"></div>
<div id="third"><div id="fourth"></div></div>
</div>

Функции prepend() и prependTo()

Как мы выяснили, используя 2 предыдущие функции, можно создать элемент А и поместить его внутрь элемента Б, при этом А помещается в конец Б и становиться его последним дочерним элементом. Функции prepend() и prependTo() поступают наоборот: они делают элемент А первым из дочерних элементов родителя Б, то есть помещают его в начало Б. Если у нас есть такой HTML-код:

<div id="main">
<div id="first">Первый</div>
<div id="second">Второй</div>
</div>

Выполним такой JavaScript:

$(''#main'').prepend(''<div id="zero">Нулевой</div>'');

Получим:

<div id="main">
<div id="zero">Нулевой</div>
<div id="first">Первый</div>
<div id="second">Второй</div>
</div>

Создаём и перемещаем элементы с помощью функций before(), after(), insertAfter(), insertBefore()

Функции, рассмотрены ранее, создают или перемещают элементы либо в начало, либо в конец родительского контейнера. Если необходимо поместить объект в заданное место, перед или после другого объекта, тогда можно использовать такие функции:

• цель.before(объект) — вставляет объект перед целью и возвращает цель.
• цель.after(объект) — вставляет объект после цели и возвращает цель.
• объект.insertBefore(цель) — вставляет объект перед целью и возвращает объект.
• объект.insertAfter(цель) — вставляет объект после цели и возвращает объект.

Пусть имеется такой HTML:

<div id="main">
<div id="first">Первый</div>
<div id="second">Второй</div>
</div>

Если мы хотим создать какой-либо элемент и поместить его после first и перед second, а затем, к примеру, раскрасить его в зелёный цвет, тогда можно пойти двумя идентичными путями:

// Вариант 1
$(''<div id="one-and-half">Полтора</div>'').insertAfter(''#first'').css(''background'',''green'');
// Вариант 2
$(''<div id="one-and-half">Полтора</div>'').insertBefore(''#second'').css(''background'',''green'');

Если требуется создать объект, например, перед first и затем раскрасить first в зеленый цвет:

$(''#first'').before(''<div id="one-and-half">Полтора</div>'').css(''background'',''green'');

Я думаю, логика понятна, ничего сложного нет.

Как создавать элементы более удобно

Если новосозданному элементу необходимо задать несколько свойств или «повесить» на него несколько обработчиков событий, то более удобным синтаксисом для создания элементов может оказаться следующий:

$("<div/>", {
"class": "clickme",
text: "Нажми на меня!",
click: function(){
$(this).html(''Спасибо.'');
}
}).appendTo("body");