ObjectからDOM Treeを作る関数

hashを渡すと、その構造をなるべく再現してくれるinnerHTMLに近い直感的なDOM構築関数があったら便利かなーと思って書いてみた。

/*
 * DOM Tree Builder
 */
function $T(nodes,node,parentId) {
	var parent, prefix = parentId ? parentId + '_' : '';
	if (!node) {
		node = {};
	} else if ( node.getElementsByTagName) {
		parent = node;
		node = {};
	}
	for (var id in nodes) {
		var nodeSet = nodes[id], element;
		if (typeof nodeSet == 'string') {
			element = document.createTextNode(nodeSet);
			nodeSet = {}
		} else {
			element = document.createElement(nodeSet.tag||'div');
			delete nodeSet.tag;
		}
		node[prefix+id] = element;
		if (nodeSet.html) {
			element.innerHTML = nodeSet.html;
			delete nodeSet.html;
		}
		if (nodeSet.text) {
			element.appendChild(document.createTextNode(nodeSet.text));
			delete nodeSet.text;
		}
		if (nodeSet.child) {
			$T(nodeSet.child,node, prefix+id);
			delete nodeSet.child;
		}
		for (key in nodeSet) {
			if (!nodeSet.hasOwnProperty(key)) continue;
			if (key == "class") element.className = nodeSet[key];
			else element.setAttribute(key, nodeSet[key]);
		}
		if (node[parentId] || parent) (node[parentId]||parent).appendChild(element);
	}
	return node;
}

var d =  $T({hoge:{}});
var d2 = $T({
	hoge1:{
		tag:'div'
		,html:'<a href="#">hoge1</a>'
	}
	,hoge2:{
		tag:'div'
		,html:'<a href="#">hoge2</a>'
		,child:{
				hoge:{
					tag:'p'
					,html:'fuga'
					,child:{
						hoge:'hogehoge'
						,fuga:{
							html:'fugafuga'
						}
					}
				}
				,d:'foo'
		}
	}
},d.hoge);
console.log(d.hoge.innerHTML);
/* //output
<div>
	<a href="#">hoge1</a>
</div>
<div>
	<a href="#">hoge2</a>
	<p>fugahogehoge
		<div>fugafuga</div>
	</p>foo
</div>
*/
console.log(d2.hoge2_hoge_fuga)

なるべくinnerHTMLのように直感的にHTMLを構築できて、且つ作成したDOMにイベントをつけるためにアクセスが可能になるようにしているつもりです。　上の例だと d2.hoge2_hoge_fuga のように深めのDOMにも楽にアクセスできます。(テキストノードにもアクセスできて、やりすぎ感はありますが。)
例によって、今のところFirefox用でしか確認してません。たぶん、大抵のブラウザでは動くと思いますが。

と、書いたみたけど、書いた自分以外が使うにはちょっと厳しいかな。細かな条件がわかりにくい。むむむ。