Как с помощью jQuery красиво создавать элементы

Нынче модно делать это так:

1. $('<div />', {
2. id: 'martini'
3. });

Раньше, как правило, делалось так:

1. $('<div id="martini"></div>');

Если создавать просто один div с id, то это вполне наглядно. А вот если требуется «биндить» события, то новый способ гораздо нагляднее (особенно если вспомнить про сравнение версий в SVN или GIT):

1. $('<div />', {
2. id: 'martini',
3. click: function(e) {
4. e.preventDefault();
5. $(this).animate({opacity: .1});
6. }
7. });

:3

Можно и так:

1. var anchor = $('<a />', {
2. className: 'more-whisky',
3. href: '#whisky',
4. text: 'More whisky',
5. click: function(e) {
6. e.preventDefault();
7. $(this).parent().slideToggle();
8. }
9. });
11. $('li').each(function() {
12. $(this).prepend(anchor.clone());
13. });

Красота! Зачем клонировать элемент? Потому, что переменная ссылается на одиночный элемент. Если вы его не склонируете, то в итоге получите только один вставленный элемент на странице.

И… Данная возможность в jQuery уже год.

Подробнее и ещё несколько примеров в документации.