HTML
JavaScript

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]);
        });
    }
    ext ? 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(...)とかでイベントリスナをつけたりする。