HTML要素の作成2

html要素作成 - higeorange's blogを改良

function createHTML(obj,par){
    for(var k in obj) {
        if(typeof obj[k] == 'object' && obj[k].constructor == Object && k == 'children') {
            for(var j in obj[k]){
                var el = document.createElement(j);
                par.appendChild(el);
                createHTML(obj[k][j],el)
            }
        } else if(typeof obj[k] == 'object' && obj[k].constructor == Object && k == 'style') {
            for(var l in obj[k])
                par[k][l] = obj[k][l];
        } else
            par[k] = obj[k];
    }
}

使いかた例

createHTML({
    style : {
        color : 'blue'
    },
    children: {
        a : {
            href : 'http://exanmple.com/',
            style : {
                border : '1px solid #000'
            },
            children : {
                img : {
                    src : 'http://example.com/hoge.png',
                    alt : 'test'
                }
            }
        },
        span : {
            innerHTML : 'hoge'
        }
    }
},document.body);

createHTMLの第一引数で構造をオブジェクトで，第2引数に挿入したい要素。
'children'とするとさらに子要素を作ることができる。バグありそう…。

上のエントリのdel.icio.usへのリンクを表示させるスクリプトをこれを使って書くと

<省略>

        createHTML({
            children : {
                 a : {
                    style : {
                        margin : '0 5px'
                    },
                    href : 'http://del.icio.us/url?v=2&url='+ encodeURIComponent(url),
                    children : {
                         img : {
                             src : 'http://images.del.icio.us/static/img/delicious.gif', 
                             alt : 'del.icio.us',
                             style : {
                                 borderWidth : '0' 
                             }
                         }
                     }
                }
            }
        },foot);

<省略>

修正 19:10

追記 19:20

innerHTMLとchildrenについての注意

正しく動く

        createHTML({
            children : {
                li : {
                    style : {
                        listStyleType : 'none'
                    },
                    innerHTML : time + ' : ',
                    children : {
                        a : {
                            href : items[i]['link'],
                            innerHTML : items[i]['title']
                        }
                    }
                }
            }
        },ul);

正しく動かない

        createHTML({
            children : {
                li : {
                    style : {
                        listStyleType : 'none'
                    },
                    children : {
                        a : {
                            href : items[i]['link'],
                            innerHTML : items[i]['title']
                        }
                    },
                    innerHTML : time + ' : '
                }
            }
        },ul);

childrenをinnerHTMLで上書きしてしまう。

例 - OperaIRC+の更新情報表示スクリプトより