vanilla-jsで簡単にDOMを作りたいので片手間に作ったライブラリです。cDomはcreate-DOMの略です。
このライブラリを使うことで、document.createElement()
とelement.setAttribute()
とelement.appendChild()
を書き続ける苦痛から解放されます。
index.html
<!DOCTYPE html>
<title>cDom Sample Page</title>
<meta charset="utf-8">
<script src="cdom.js"></script>
<script>
function main() {
// DOMを生成する
const dom = elm("div",{width:100,height:30},[
elm("h1",{},[textelm("cDom.js")]),
elm("p",{},[
elm("span",{},[textelm("vanilla-jsで簡単にDOMを作りたいので片手間に作ったライブラリです。")]),
elm("span",{},[textelm("cDomはcreate-DOMの略です。")]),
]),
elm("p",{},[
textelm("このライブラリを使うことで、"),
elm("code",{},[textelm("document.createElement()")]),
textelm("と"),
elm("code",{},[textelm("element.setAttribute()")]),
textelm("と"),
elm("code",{},[textelm("element.appendChild()")]),
textelm("を書き続ける苦痛から解放されます。"),
]),
elm("h2",{},[textelm("サンプルコード")]),
elm("p",{},[
elm("code",{},[elm("pre",{},[textelm(main.toString())])]),
]),
]);
// DOMを追加する
document.body.appendChild(dom);
}
window.onload = main;
</script>