Posted at

DOM を生成する便利関数

Vanilla JS で DOM を生成したいときに便利な関数を作りました。


定義


h.js

function h(tagName, options = {}, ...children) {

const element = document.createElement(tagName);
element.append(...children);
return Object.assign(element, options);
}


h.ts

function h<K extends keyof HTMLElementTagNameMap>(

tagName: K,
options = {},
...children: (string|Node)[]
): HTMLElementTagNameMap[K] {
const element = document.createElement(tagName);
element.append(...children);
return Object.assign(element, options);
}


使い方

const hr = h('hr');

const img = h('img', { src: 'image.png', alt: 'イメージ' });
const a = h('a', { href: '/' }, 'TOPへ');

const div = h('div', { className: 'sample' }, img, hr, a);

const records = [

[ 'Alice', 'alice@example.com' ],
[ 'Bob', 'bob@example.com' ],
[ 'Carol', 'carol@example.com' ],
];

h('table', {}, ...records.map(r =>
h('tr', {}, ...r.map(v =>
h('td', {}, v)
))
));

書き捨てのスクリプトなんかにどうぞ。