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

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

$('<div />', {
	id: 'martini'
});

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

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

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

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

:3

Можно и так:

var anchor = $('<a />', {
	className: 'more-whisky',
	href: '#whisky',
	text: 'More whisky',
	click: function(e) {
		e.preventDefault();
		$(this).parent().slideToggle();
	}
});
 
$('li').each(function() {
	$(this).prepend(anchor.clone());
});

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

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

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

5

Комментарии 5

    1. Mozzy

      Тут в итоге ничего такого не получается, на что бы стоило смотреть. :)
      Не как создавать красивые элементы, а как красиво создавать HTML-элементы. ;)

  1. Олег

    Спасибо за информацию.
    Надо переходить на новый стиль.
    Если навешивать на элемент кучу параметров и обработчиков — намного нагляднее.

Комментарии закрыты.