12.02.2010

Cоздание элементов из HTML-строк в jQuery 1.4

Еще немного на тему простого шаблонирования в JavaScript

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

$("<input/>")
    .attr({
        type: "text",
        name: "city"
    })
    .val("Moscow")
    .focusin(function() {
        $(this).addClass("active");
    })
    .focusout(function() {
        $(this).removeClass("active");
    })
    .appendTo("form");

В jQuery 1.4 есть приятное нововведение: вторым аргументом можно передать объект со свойствами создаваемого элемента. Код становится проще и аккуратнее:

$("<input/>", {
    type: "text",
    name: "city",
    val: "Moscow",
    focusin: function() {
        $(this).addClass("active");
    },
    focusout: function() {
        $(this).removeClass("active");
    }
}).appendTo("form");

Этот объект может содержать любые свойства понимаемые методом attr(), там же можно навесить обработчики событий, а также, не отходя от кассы, можно задать значения для методов val, css, html, text, data, width, height и offset.

Кроме того, в такой записи неплохо смотрится и более сложный шаблон с вложенным элементом:

$("<a/>", {
    href: "/test/",
    "class": "my_link",
    html: $("<img/>", {
        src: "test.gif",
        width: 60,
        height: 30
    }),
    click: function() {
        doSomething();
    }
}).appendTo("body");

5 комментариев:

night-fairy-tales.com комментирует...

В jQuery 1.4 появилось множество "сладостей" :).

alpha комментирует...

А зачем ты пишешь '<a></a>'? Можно просто - '<a/>'.

Степан Резников комментирует...

@alpha: Да, ты прав, можно писать '<a/>'. Поправил пример, мне так тоже больше нравится :)

fenice комментирует...

Спасибо, очень приятно узнать. Версия 1.4 как-то не очень полно анонсирована, приходится узнавать о ней кусочками. Хотя и в этом есть определённое удовольствие.

egor комментирует...

Со свойствами .html() и .text() не очень удобно, особенно в сложном шаблоне с вложенным элементом. Трут друг друга, я думал они сконкатинируются по умолчанию.