jQuery で MochiKit ライクな DOM 生成

JavaScript jQuery

車輪の再発明である可能性はひじょーに高いですが、この程度なら探すより書くほうが早いので作ってみました。
MochiKit のように H1([attributes[, node(s)[, ...]]) で jQuery オブジェクトが生成できます。
あえて jQuery.fn.extend() せず、window オブジェクトに直に登録。

jquery.mochilikedom.js

jQuery.each([
	/* Heading */ "h1", "h2", "h3", "h4", "h5", "h6",
	/* Block */ "address", "blockquote", "div", "p", "pre",
	/* Inline */ "abbr", "acronym", "br", "cite", "code", "dfn",
	/* Inline */ "em", "kbd", "q", "samp", "span", "strong", "var",
	/* Hypertext */ "a",
	/* List */ "dl", "dt", "dd", "ol", "ul", "li",
	/* Presentation */ "b", "big", "hr", "i", "small", "sub", "sup", "tt",
	/* Edit */ "del", "ins",
	/* Forms */ "button", "fieldset", "form", "input", "label", "legend",
	/* Forms */ "select", "optgroup", "option", "textarea",
	/* Tables */ "caption", "col", "colgroup", "table", "tbody",
	/* Tables */ "td", "tfoot", "th", "thead", "tr",
	/* Image */ "img"
], function(i) {
	var tag = this;
	window[tag.toUpperCase()] = function() {
		var elem = jQuery(document.createElement(tag));
		if (arguments.length > 0 && arguments[0]) {
			elem.attr(arguments[0]);
		}
		for (var n = 1; n < arguments.length; n++) {
			elem.append(arguments[n]);
		}
		return elem;
	}
});

テスト

<html>
<head>
<script type="text/javascript" src="jquery.pack.js"></script>
<script type="text/javascript" src="jquery.mochilikedom.js"></script>
<script type="text/javascript">
$.fn.extend({escaped: function(){
	return DIV().append(document.createTextNode(this.html())).html();
}});
$(function(){$("body")
	.append(H1({"class": "heading"}, "TEST"))
	.append(HR())
	.append(P(null, "line1", BR(), "line2"))
	.append(HR())
	.append(PRE({"class": "preformed"}, $("body").escaped()));
});
</script>
<style type="text/css">
h1.heading { color: #0000ff; text-align: center; }
pre.preformed { background-color: #000000; color: #ffffff; }
</style>
</head>
<body></body>
</head>

screenshot_01
MochiKit-like DOM creator for jQuery posted by (C)rsk