hogehoge foobar Blog Style Beta

Web,Mac,Linux,JavaScript,Perl,PHP,RegExp,Git,Vim,Redmineなど技術的なことのメモや、ちょっと便利そうなものの紹介をしています。

配列で再帰的に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"})
    ]
]);