##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 追加される文字列は”追加文字列”とする。 ::: ###実践前のチュートリアル実践に入る前に、完成形を先に表示しておく。 ![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/f24869b7-6174-eaa8-59ec-4c89b1135470.gif) 仕組みとしては、以下のようになっている。

取得ボタンをクリックすると、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>

マークアップしブラウザで表示すると以下のようになる。 ![スクリーンショット 2021-11-09 19.45.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/f03ee6f0-f59a-ad83-ea7e-82746d3f6e66.png)

###JavaScriptの記述次にJavaScriptを仕上げていく。

index.js

index.js

function append() {
  let li = document.createElement('li');
  let text = document.createTextNode('追加文字列');
  li.appendChild(text);
  lists.appendChild(li);
}

上記構文に関して、順を追って解説していく。 ####function append() :::note warn HTML内のinputタグにあるonclick属性のappendで関数を作成していく。 ::: ####let li = document.createElement('li'); :::note warn li要素を生成 ::: #### let text = document.createTextNode('追加文字列'); :::note warn テキストノードを生成 ::: ####li.appendChild(text); :::note warn liタグの要素にテキストノード(text)を追加 ::: #### lists.appendChild(li); :::note warn idがlistsのulタグに、liを追加する。具体的には、<li>追加文字列</li>が追加される。 :::

###ブラウザでの検証実際にブラウザにて挙動を確認していく。 ![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/b6aeb6f0-53fb-e177-53b6-c955bc6a7dbc.gif) 検証の結果、

取得ボタンをクリックすると、ブラウザに文字列が表示される様になった。

###補足 idがlistsの要素にli要素を追加するする処理について、

index.js

let listsElement = document.getElementById('lists');

の方が一般的である。
##5. おわりに
次項:JavaScript DOM操作⑦ 「ノードの置換」に続く。