JavaScript で可読性を残しつつタグを生成する方法

用途

• テンプレエンジンとかモダンなフレームワークを使わずに、標準のDOM APIだけでタグを生成したい場合。

実装

準備

• 以下のような関数を定義

var createElement = function(tag, attr = null, ext = null){
    var element = document.createElement(tag);
    if(attr !== null){ 
        Object.keys(attr).forEach(function(e){
            element.setAttribute(e, attr[e]);
        });
    }
    if(ext !== null) ext(element);
    return element;
}

生成例

シンプルな構成

• id と class を指定した単純なdiv要素

var foo = createElement('div', {id: 'foo', class: 'foo'}, null);

↓

<div id="foo" class="foo"></div>

ネストさせる

var bar = createElement('div', null, function(div){
    div.appendChild(createElement('p', {id: 'bar'}));
});

↓

<div><p id="bar"></p></div>

テーブルとか

var baz = createElement('table', {style: 'border: 1'}, function(table){
    for(var i=1; i<10; i++){
        table.appendChild(createElement('tr', null, function(tr){
            for(var j=1; j<10; j++){
                tr.appendChild(createElement('td', null, function(td){
                    td.appendChild(document.createTextNode(i*j));
                }));
            }
        }));
    }
});

↓

1	2	3	4	5	6	7	8	9
2	4	6	8	10	12	14	16	18
3	6	9	12	15	18	21	24	27
4	8	12	16	20	24	28	32	36
5	10	15	20	25	30	35	40	45
6	12	18	24	30	36	42	48	54
7	14	21	28	35	42	49	56	63
8	16	24	32	40	48	56	64	72
9	18	27	36	45	54	63	72	81

関数の説明

createElement（a, b, c)
a: タグ名 String ex. 'div'
b: 属性 Object ex. {id: 'foo', class: 'bar'}
c: 拡張 function(tag) このtag は生成されるHTMLElementなので
tag.appendChild(...) でネストしたり、 tag.addEventListener(...)とかでイベントリスナをつけたりする。