配列で再帰的にHTML要素を生成
以前に、タグ名とAttributeとして設定したい値をハッシュで受け取って設定する
createElementを作成しましたが、それにプラスして配列からHTML要素を生成する処理を
作ってみました。
配列を渡すと親子関係を持ったHTML要素を生成するようになっています。
関数は再帰的に実行しているので、ネストされた配列でもOKです。
/*********************************************** * Element生成 AttributeをHashで受け取り設定する ***********************************************/ var createElementAttribute = function(tagName, attrHash){ var element = document.createElement(tagName); for (var h in attrHash) { element[h] = attrHash[h]; } return element }; /* createElementAttributeのショートカット */ var $_crt = function(tagName, attrHash){ return createElementAttribute(tagName, attrHash); }; /*********************************************** * appendChildを配列でも受け取り可能にする ***********************************************/ var appendChildren = function(parent, child){ if( child instanceof Array ){ var nextParent = parent; for( var i=0; i<child.length; i++ ){ if( child[i] instanceof Array ){ appendChildren(nextParent, child[i]); }else{ appendChildren(parent, child[i]); nextParent = child[i]; } } }else{ parent.appendChild(child); } return parent; }; /*********************************************** * 実際に使用する場合は、こんな感じ ***********************************************/ appendChildren($_crt('div',{id:"a"}), [ $_crt('div',{id:"a1"}), $_crt('div',{id:"a2"}), [ $_crt('div',{id:"b1"}), $_crt('div',{id:"b2"}), [ $_crt('div',{id:"c1"}), [ $_crt('div',{id:"d1"}), [ $_crt('div',{id:"e1"}) ] ], $_crt('div',{id:"c2"}) ], $_crt('div',{id:"b3"}) ] ]);