Skip to content
/ cDom Public

javascriptで簡単にDOMを生成するためのライブラリ

License

Notifications You must be signed in to change notification settings

neknaj/cDom

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

cDom.js

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>

ライセンス

MITライセンス 又は CC0
どちらででもご利用下さい