【JavaScript / DOM】ノードの生成 - 要素ノード・テキストノード・属性ノード・コメントノード

JavaScript/DOMのノード生成を解説します。

要素ノード（createElement）

要素ノードの生成はdocumentオブジェクトのcreateElementメソッドを使います。

Sample

<script type="text/javascript">
    let node = document.createElement('div');
    console.log(node);
</script>

Console

<div></div>

テキストノードの生成はdocumentオブジェクトのcreateTextNodeメソッドを使います。

Sample

<script type="text/javascript">
    let node = document.createTextNode('Hello World');
    console.log(node);
</script>

Console

"Hello World"

属性ノードの生成はdocumentオブジェクトのメソッドを使います。
属性値はvalueプロパティに設定します。

Sample

<script type="text/javascript">
    let node = document.createAttribute('class');
    node.value = 'square';
    console.log(node);
</script>

Console

class="square"

コメントノードの生成はdocumentオブジェクトのメソッドを使います。

Sample

<script type="text/javascript">
    let node = document.createComment('COMMENT TEXT');
    console.log(node);
</script>

Console

<!--COMMENT TEXT-->