こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。
この記事では、 JavaScriptで指定した要素に子要素を追加するappendChildメソッドについて
- appendChildメソッドとは
- appendChildメソッドを使ったサンプルプログラム
と、丁寧に解説していきます。
前提条件：実行環境について
実行環境は以下の通りです。
| OS | Windows10 |
|---|
appendChildメソッドとは
appendChildメソッドとは、呼び出している要素を親として、引数に指定した要素を親要素の子要素のリストの最後に追加して、追加した子要素を返すメソッドです。
使い方は以下になります。
|
1 |
var result = 【親要素】.appendChild(【子要素】) |
変数resultには、追加した【子要素】が返され【親要素】の子要素のリストの最後に【子要素】が追加されます。
では、次の章で実際に使ってみます。
appendChildメソッドを解説するプログラムの概要
appendChildメソッドを解説するプログラムでは、
- HTML
- JavaScript
の2ファイルを使います。
HTML内でリストを作成しておきます。
JavaScriptで、li要素を作成しappendChildメソッドを使ってリストに追加して表示させます。
フォルダ構成は以下のようになっています。
HTMLサンプルプログラム
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>appendChildメソッドサンプル</title> </head> <body> <h2>appendChildメソッドで追加したリスト</h2> <ol id="fruits"> <li>リンゴ</li> <li>みかん</li> </ol> <script src="js\sample_javascript.js"></script> </body> </html> |
HTMLで外部のJavaScriptを読み込むやり方とリスト表すol要素については、以下の記事をご参考ください。
JavaScriptサンプルプログラム
|
1 2 3 4 5 6 7 |
// 要素を作成 var sampleLi = document.createElement('li') sampleLi.innerHTML = 'ブドウ' // 追加した要素をリストに追加 var fruits = document.getElementById('fruits') fruits.appendChild(sampleLi) |
- createElementメソッド
- getElementByIdメソッド
- innerHTMLプロパティ
については、こちらの記事をご参考ください。
【JavaScript】HTML要素を新規作成するcreateElementメソッドを解説します
getElementByIdメソッド
【JavaScript】指定したidの要素を取得するgetElementByIdメソッドについて解説します
innerHTMLプロパティ
【JavaScript】HTML要素の取得や書き換えができるinnerHTMLプロパティを解説します
実行結果
作成したHTMLをブラウザで開きます。
appendChildメソッドでリストの項目が追加できているとが確認できました。
まとめ：appendChildメソッドを使ってみよう
以上がJavaScriptのappendChildメソッドについての解説でした！
あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ
コメント