JS勉強記⑦ノードを追加

うすときね

HTMLにJSを使ってノード（新しい要素／タグ、テキスト）を組み込む処理。

例題

HTMLで空のリスト・ボタンを配置。ボタンをクリックするとリストの項目が追加される。
①HTMLで空のリスト・ボタンを配置。bodyは以下の通り。

 <body>
   <ul id="lists">
   </ul>
   <input type="button" value="追加" onclick="append()">
   <script src="js/append_child.js"></script>
 </body>

ul要素のみ設定し、liは後程JSで追加する。（＝空のリストの状態）

function append() {　-②
 const li = document.createElement('li');　-③
 const text = document.createTextNode('追加されたテキストノード');　-④
 li.appendChild(text);　-⑤
 lists.appendChild(li);　-⑥
}

②onclick時の関数appendをfunction命令で宣言。
③変数liを宣言しcreateElementメソッドでliタグ／要素を生成。
④変数textを宣言しcreateTextNodeメソッドでテキストノードを生成。
※create～メソッドはあくまでも要素やテキストノードを生成するためだけのメソッドなので、後程階層に生成した要素やテキストノードを適切な改装に入れ込む処理が必要。それが後述するappendChildメソッド
⑤appendChildメソッドで③で生成したlitタグ／要素に④のテキストノードを追加。
※appendChildメソッドの基本構文は以下の通り。

element.appendChild(node);

elementに具体的な要素を記述（今回であればli要素）し、その要素に対して(node)子ノード（今回であれば④で生成したテキストノード）を追加する。
この段階で「<li>追加されたテキストノード</li>」が作成された状態。
⑥⑤で生成したli要素をidがlistsと設定されている要素（今回であればulタグ）に子ノードとして追加する。
⑦ブラウザ上で「追加」ボタンを押すと『追加されたテキストノード』という文言が追加されていく。HTMLで完成状態を記述すると以下の通り。（ボタンを３回押した状態）

<ul>
 <li>追加されたテキストノード</li>
 <li>追加されたテキストノード</li>
 <li>追加されたテキストノード</li>
</ul>

MEMO：⑥の生成したli要素を追加する処理だが、前まで使っていたgetElementメソッドで記述するほうが一般的らしい。getElementメソッドで記述する場合は以下の通り。

function append() {　-②
 const li = document.createElement('li');　-③
 const text = document.createTextNode('追加されたテキストノード');　-④
 li.appendChild(text);　-⑤
 const listsElement = document.getElementById( "lists" ) ;　-⑥'
 listsElement.appendChild(li);　-⑦'
}

②～⑤までは同じ処理なので割愛。
⑥'getElementByIdメソッドでidがlistsと設定されている要素(今回であればulタグ)を取り出すlistsElementを生成。
⑦'appendChildメソッドで⑥'で取り出したulタグの子ノードとして⑤（『追加されたテキストノード』というテキストが入ったli要素）を入れ込む。

DOMの階層の概念をもう少し理解してからじゃないと、子ノードを入れ込むという感覚がわかりにくい気がする。以下のサイトで要勉強。

<HTML>
 <body>
   <ul id="lists">
     <li>追加されたテキストノード</li>
   </ul>
 </body>
</HTML>

『追加されたテキストノード』テキストノードはli要素に対して子ノード、li要素はul要素に対して子ノード、ul要素はbody要素に対して子ノード…という風に考えれば、何のことはない気がする。が、いきなり書けと言われても難しいだろうな。

この記事が気に入ったらサポートをしてみませんか？