Переодически хочется вставить какую-то html конструкцию javascript'ом. Не всегда на создаваемые объекты нужно навешивать события. Для этого приходиться тупо писать строчку типа:


oElemen.innerHTML = '<a' + ' title="' + example + '">' + text + '</a>';

Из-за обилия кавычек, апострофов, < и > несложно запутаться, материться ну и так далее.

А хочется чего нибудь простого и структурированного:


html.element.create(
    {
        tag: 'div',
        html: 'text nach',
        id: 'suka',
        title: 'похуй'
    }
)

Сама функция:


var html = {
    element:
    {
        create: function(o, f)
        {
            var sAttributes = '';
            var sHtml = '';
            for (var x in o)
            {
                if(x != 'html' && x != 'tag') sAttributes += ' ' + x + '="' + o[x] + '"';
                if(x == 'html') sHtml = o[x];
                if(x == 'tag') sTag = o[x];
            }
            return '<' + sTag + (sAttributes ? sAttributes : '') + '>' + sHtml + '</' + sTag + '>';
        }
    }
}

То есть объектом javascript можно описывать структуру html:


html.element.create({
    tag: 'div',
    class: 'slider',
    html:
        html.element.create({
            tag: 'div',
            class: 'scale'
        }) +
        html.element.create({
            tag: 'div',
            class: 'head'
        }) +
        html.element.create({
            tag: 'div',
            class: 'limit'
        }) +
        html.element.create({
            tag: 'div',
            class: 'overflow'
        })
})

Результат:


<div class="slider">
    <div class="scale"></div>
    <div class="head"></div>
    <div class="limit"></div>
    <div class="overflow"></div>
</div>

Осталось дописать немного про самозакрывающиесь тэги типа <input ... >. Ну и для экономии вместо html.element.create назвать xhtml.create или e.create или _.add

Можно, наверное, jquery расширить — $('#element_id').addHtml

Небольшое обновление (06.07.2007) Еще проще описать такою строку просто JSON'ом. Когда лень будет побеждена — допишу.