JavaScript

【JavaScript】DOMの新規作成・別要素に追加する方法

どうも、つよぽんです!

今回は、JavaScriptでの「①DOMの新規作成方法」と、「②DOMを別のDOMに追加する方法」を解説します。

それぞれ2つを実現するのに利用するDOMのメソッドは以下のとおりです。

今回紹介する2つのDOMメソッド
  1. createElement : DOMの新規作成
  2. appendChild : DOMを別のDOMに追加

今回の記事は次のような方に向けて書きました。

想定読者
  • HTMLファイルで実装された要素とは別に、JavaScriptのみでDOMを作成する方法を知りたい方
  • 動的にHTML要素を追加するWebサービスを作りたい方

この記事を読み終えた後のあなたは次のことがわかるようになっています。

この記事を読み終えた後のあなた
  • JavaScriptのみでDOMを作成することが出来るようになる
  • 作成したDOMを指定した要素に追加できるようになる(動的にHTML要素を追加するWebサービスを作れるようになる)

今回の記事は以下の学習コンテンツのスライドを詳しく解説した記事となります。以下の記事とあわせて読むことでより深く学習できます。

あわせて読みたい
JavaScriptで新規作成したDOMを別のDOMに追加するJavaScriptでDOMを新規作成する方法、作成したDOMを別のDOMに追加する方法を知っているでしょうか?今回のコンテンツ内容を学習することで、「①DOMを新規作成する方法」「②DOMを追加する方法」を学習します。今回学習する内容を使って動的なWebページを作れるようになります。...

それでは次の内容で話を進めていきます。

今回の内容
  1. JavaScriptのみでDOMを作成する方法 : createElement
  2. 作成したDOMを別のDOMに追加する方法 : appendChild

JavaScriptのみでDOMを作成する方法 : createElement

この章では「JavaScriptのみでDOMを新規作成する方法」を解説します。

DOMを新規作成するときには「createElement」というメソッドを使います。

createElementの使い方は以下の画像にまとめました。

createElementの使い方createElementの使い方

createElementメソッドの引数には「新規作成した要素名(タグ名)」を記述します。

上の画像の1つ目のcreateElementでは引数に「li」を渡しているので、変数「liElement」にはli要素のDOMが格納されることになります。

以下の画像内のサンプルコードは、実際にcreateElementを使った様子を表したものです。

createElementを使ったサンプルコードcreateElementを使ったサンプルコード

上の画像のサンプルコードは以下のリンク先から直接確認できます。

JavaScriptでDOMを新規作成するサンプル

赤枠内でやっていることは次のとおりです。

  1. 「document.createElement(‘li’)」でli要素のDOMを作成
  2. 作成したli要素のDOMに対して「テキストの追加」「class属性値のセット」「id値のセット」を行っている
  3. 最後にconsole.logで作成したli要素のDOMの内容を確認

画像右側の出力内容を見ると、上記①~③で定義したli要素が確認できます。

  • DOMを新規作成するときはcreateElementメソッドを使う
  • createElementメソッドの引数には作成したHTML要素の要素名(タグ名)を文字列でセットする

作成したDOMを別のDOMに追加する方法 : appendChild

この章では「作成したDOMを別のDOMに追加する方法」を解説します。

DOMを別のDOMに追加するには「appendChild」というメソッドを使います。

appendChildの使い方は以下の画像にまとめました。

appendChildの使い方appendChildの使い方

以下の画像内のサンプルコードは、実際にappendChildを使った様子を表したものです。

appendChildを使ったサンプルコードappendChildを使ったサンプルコード

上の画像のサンプルコードは以下のリンク先から直接確認できます。

JavaScriptで新規作成したDOMを別のDOMに追加するサンプル

画像内の①~③で行っている内容は次の通りです。

  1. 「document.createElement(‘li’)」でli要素のDOMを作成
  2. 「document.getElementById(‘item-container’)」で、id値に「’item-container’」を持つ要素(今回の場合はul要素)をHTMLから取得する
  3. ②で取得したul要素に対して、①で作成したli要素を追加する

①~③を実行した結果、画面左下のオレンジ枠内に「’新規作成したアイテム’」という文字列が表示されたli要素が追加されているのが確認できる。(画面左のHTMLのコードを見るとul要素の中には1つもli要素が無いのが確認できる。)

  • DOMを別のDOMに追加するにはappendChildメソッドを使う
  • appendChildメソッドの引数に追加したいDOMをセットする

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • DOMを新規作成するには「createElement」を使う
  • 作成したDOMを別のDOMに追加するには「appendChild」を使う

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
JavaScriptで新規作成したDOMを別のDOMに追加するJavaScriptでDOMを新規作成する方法、作成したDOMを別のDOMに追加する方法を知っているでしょうか?今回のコンテンツ内容を学習することで、「①DOMを新規作成する方法」「②DOMを追加する方法」を学習します。今回学習する内容を使って動的なWebページを作れるようになります。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です