##1. はじめに
本記事では、JavaScript DOM操作の
「ノードの追加」
について記載する。
##2. ノードとは？
以前に作成した記事の復習になるが、
ノードとは、
文章を構成する要素、属性、テキストといったオブジェクトのこと。
・要素ノード
・属性ノード
・テキストノード
のことを指す。または、
DOMツリーの個々のオブジェクトがノード
とも言える。
##3. ノードの追加
###追加の流れ
1.要素、テキストノードを作成する。
createElement、createTextNode
2.ノード同士を組み合わせ、ドキュメントに追加する。 appendChild
####createElement #####説明 :::note 要素を作成する。 ::: #####構文 ```index.js document.createElement(name); ``` ※name:要素名 #####補足 ノードを作成するだけのため、別途階層に追加する処理が必要。
####createTextNode #####説明 :::note テキストノードを作成する。 ::: ####構文 ```index.js document.createTextNode(text); ``` ※text:テキスト ####補足 ノードを作成するだけのため、別途階層に追加する処理が必要。
####appendChild ####説明 :::note 指定された要素を、現在の要素の最後の子要素として追加するもの。 ::: ####構文 ```index.js element.appendChild(node); ``` ※element:要素オブジェクト ※node:追加する子ノード ####戻り値 追加した子ノード ##4. 例題 ###内容 :::note 空のリスト、ボタンを配置 ::: :::note ボタンをクリックすると、リストの項目が追加される。 ::: :::note 追加される文字列は”追加文字列”とする。 ::: ###実践前のチュートリアル 実践に入る前に、完成形を先に表示しておく。  仕組みとしては、以下のようになっている。
取得ボタンをクリックすると、appenChildにて追加された追加文字列が表示される。
###マークアップ ブラウザに空のリスト、ボタンを表示しないといけないので、HTMLの作成から取り掛かる。
index.html
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul id="lists"></ul>
<input type="button" value="取得" onclick="append()" />
<script src="js/index.js"></script>
</body>
</html>
###JavaScriptの記述 次にJavaScriptを仕上げていく。
index.js
index.js
function append() {
let li = document.createElement('li');
let text = document.createTextNode('追加文字列');
li.appendChild(text);
lists.appendChild(li);
}
###ブラウザでの検証 実際にブラウザにて挙動を確認していく。  検証の結果、
取得ボタンをクリックすると、ブラウザに文字列が表示される様になった。
###補足 idがlistsの要素にli要素を追加するする処理について、
index.js
let listsElement = document.getElementById('lists');
の方が一般的である。
##5. おわりに
次項:JavaScript DOM操作⑦ 「ノードの置換」に続く。