Vytváření prvků jako MooTools v jQuery

Opravdu se mi nelíbí syntaxe vytváření prvků jQuery. Je to v podstatě stejné jako psaní HTML, ale v rámci řetězce JavaScriptu...ošklivé! Naštěstí Basil Goldman vytvořil plugin jQuery, který vám umožňuje vytvářet prvky pomocí syntaxe podobné MooTools.

Zobrazit ukázku

Standardní vytváření prvků jQuery

var newDiv = $('<div class="my-class"></div>');

Vypadá to přesně jako psaní HTML...blah.

Metoda .create jQuery

/* plugin */
jQuery.create = function() {
    if (arguments.length == 0) return [];
    var args = arguments[0] || {}, elem = null, elements = null;
    var siblings = null;

    // In case someone passes in a null object,
    // assume that they want an empty string.
    if (args == null) args = "";
    if (args.constructor == String) {
        if (arguments.length > 1) {
            var attributes = arguments[1];
                if (attributes.constructor == String) {
                            elem = document.createTextNode(args);
                            elements = [];
                            elements.push(elem);
                            siblings =
        jQuery.create.apply(null, Array.prototype.slice.call(arguments, 1));
                            elements = elements.concat(siblings);
                            return elements;

                    } else {
                            elem = document.createElement(args);

                            // Set element attributes.
                            var attributes = arguments[1];
                            for (var attr in attributes)
                                jQuery(elem).attr(attr, attributes[attr]);

                            // Add children of this element.
                            var children = arguments[2];
                            children = jQuery.create.apply(null, children);
                            jQuery(elem).append(children);

                            // If there are more siblings, render those too.
                            if (arguments.length > 3) {
                                    siblings =
        jQuery.create.apply(null, Array.prototype.slice.call(arguments, 3));
                                    return [elem].concat(siblings);
                            }
                            return elem;
                    }
            } else return document.createTextNode(args);
      } else {
              elements = [];
              elements.push(args);
              siblings =
        jQuery.create.apply(null, (Array.prototype.slice.call(arguments, 1)));
              elements = elements.concat(siblings);
              return elements;
      }
};

Tato třída byla převzata z příspěvku na blogu Basila Goldmana. Kód není krásný, ale jeho funkčnost ano.

Použití

/* usage */
$(document).ready(function() {
	var element = $.create('li',{
		id: 'item',
		'class': 'custom-class'
	},['This is a new LI element']);
	$(document.body).append(element);
});
Zobrazit ukázku

Zadáte tři argumenty:typ prvku, atributy prvku a pole obsahující text v prvku nebo podřízených prvcích. Dobře, takže to není tak úžasné jako tvorba prvků MooTools, ale je to krok správným směrem!