【JavaScript】appendChild使い方

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);

実行結果

・ワークアウト
・宿題

タイトルとURLをコピーしました