1. はじめに
本記事では、JavaScript DOM操作の
「ノードの追加」
について記載する。
2. ノードとは？
以前に作成した記事の復習になるが、
ノードとは、
文章を構成する要素、属性、テキストといったオブジェクトのこと。
・要素ノード
・属性ノード
・テキストノード
のことを指す。または、
DOMツリーの個々のオブジェクトがノード
とも言える。
3. ノードの追加
追加の流れ
1.要素、テキストノードを作成する。
createElement、createTextNode
2.ノード同士を組み合わせ、ドキュメントに追加する。
appendChild
createElement
説明
要素を作成する。
構文
document.createElement(name);
※name:要素名
補足
ノードを作成するだけのため、別途階層に追加する処理が必要。
createTextNode
説明
テキストノードを作成する。
構文
document.createTextNode(text);
※text:テキスト
補足
ノードを作成するだけのため、別途階層に追加する処理が必要。
appendChild
説明
指定された要素を、現在の要素の最後の子要素として追加するもの。
構文
element.appendChild(node);
※element:要素オブジェクト
※node:追加する子ノード
戻り値
追加した子ノード
4. 例題
内容
空のリスト、ボタンを配置
ボタンをクリックすると、リストの項目が追加される。
追加される文字列は”追加文字列”とする。
実践前のチュートリアル
実践に入る前に、完成形を先に表示しておく。
仕組みとしては、以下のようになっている。
取得ボタンをクリックすると、appenChildにて追加された追加文字列が表示される。
マークアップ
ブラウザに空のリスト、ボタンを表示しないといけないので、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
function append() {
let li = document.createElement('li');
let text = document.createTextNode('追加文字列');
li.appendChild(text);
lists.appendChild(li);
}
上記構文に関して、順を追って解説していく。
function append()
HTML内のinputタグにあるonclick属性のappendで関数を作成していく。
let li = document.createElement('li');
li要素を生成
let text = document.createTextNode('追加文字列');
テキストノードを生成
li.appendChild(text);
liタグの要素にテキストノード(text)を追加
lists.appendChild(li);
idがlistsのulタグに、liを追加する。 具体的には、<li>追加文字列</li>が追加される。
ブラウザでの検証
実際にブラウザにて挙動を確認していく。
検証の結果、
取得ボタンをクリックすると、ブラウザに文字列が表示される様になった。
補足
idがlistsの要素にli要素を追加するする処理について、
let listsElement = document.getElementById('lists');
の方が一般的である。
5. おわりに
次項:JavaScript DOM操作⑦ 「ノードの置換」に続く。