appendChildってなに？
appendChildとは特定の親要素の中に要素を追加するためのメソッドです。要素を指定し、その子要素として、HTMLタグを追加することができます。
追加される場所は親要素の末尾になります。
appendChildの使い方
appendChild メソッドの基本構文は以下の通りです。
親要素に対して引数に追加する要素を指定することで、親要素内の末尾に追加されます。
var apChild = element.appendChild(apaChild);基本構文を確認したところでサンプルコードで確認してみましょう。
// ul要素を作成し、mytodoというクラスを付ける
var mytodo = document.createElement("ul");
mytodo.id = "todo_list";
// 対象の要素.appendChild(追加するノード)
//HTMLドキュメントの本文にあたるbody要素の末尾に、mytodoというidをもつul要素が追加
document.body.appendChild(mytodo);
// 追加したulを取得・確認
var todo_list = document.getElementById("todo_list");
// リストを作成の為、li要素を作成していく
var workOut = document.createElement("li");
workOut.setAttribute("id", "work_out");
workOut.innerHTML = "ワークアウト";
var homeWork = document.createElement("li");
homeWork.setAttribute("id", "homeWork");
homeWork.innerHTML = "宿題";
// さきほど作成したulの末尾に作成したli要素を追加
todo_list.appendChild(workOut);
todo_list.appendChild(homeWork);実行結果
・ワークアウト
・宿題
