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ázkuStandardní 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!