JavaScript DOM操作⑥ 「ノードの追加」

10136 ワード
JavaScript 初心者 createElement createTextNode appendChild JavaScript テキストリンク

1. はじめに

本記事では、JavaScript DOM操作の
「ノードの追加」
について記載する。

2. ノードとは？

以前に作成した記事の復習になるが、
ノードとは、

文章を構成する要素、属性、テキストといったオブジェクトのこと。

・要素ノード
・属性ノード
・テキストノード
のことを指す。または、

DOMツリーの個々のオブジェクトがノード

とも言える。

3. ノードの追加

追加の流れ

1.要素、テキストノードを作成する。
createElement、createTextNode


2.ノード同士を組み合わせ、ドキュメントに追加する。
appendChild

createElement

説明

要素を作成する。

構文
index.js
document.createElement(name);

※name:要素名

補足

ノードを作成するだけのため、別途階層に追加する処理が必要。

createTextNode

説明

テキストノードを作成する。

構文

index.js
document.createTextNode(text);

※text:テキスト

補足

ノードを作成するだけのため、別途階層に追加する処理が必要。

appendChild

説明

指定された要素を、現在の要素の最後の子要素として追加するもの。

構文

index.js
element.appendChild(node);

※element:要素オブジェクト
※node:追加する子ノード

戻り値

追加した子ノード

4. 例題

内容

空のリスト、ボタンを配置

ボタンをクリックすると、リストの項目が追加される。

追加される文字列は”追加文字列”とする。

実践前のチュートリアル

実践に入る前に、完成形を先に表示しておく。

仕組みとしては、以下のようになっている。

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


上記構文に関して、順を追って解説していく。

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要素を追加するする処理について、

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

の方が一般的である。

5. おわりに

次項:JavaScript DOM操作⑦ 「ノードの置換」に続く。