[JavaScript] HTMLを動的に作成する方法

JavaScriptからHTML要素を動的に生成する方法についてまとめておく。

HTMLを動的に作成する方法

HTMLを動的に作成するには、createElement()を使用する。これを使用することで、任意のタグのHTML要素を作成することができる。
createElement()からは新しいElementが返される。createElement()の書き方は以下となる。

const element = document.createElement(<タグ>)

// imgタグを生成する場合
const element = document.createElement("img")

次に作成したHTML要素を任意の場所に追加するためには、appendChild()を使用する。
appendChild()は、指定された親要素の中に作成した要素を追加する。

<親要素>.appendChild(<作成したHTML要素>)

実装

JavaScriptからHTMLのimgタグを動的に作成する場合は以下のように書ける。

// 親要素の取得
const parentElement = document.getElementById("image");
// 新しいHTML要素の作成
const newElement = document.createElement("img");
newElement.src = "./sample.png";
// 作成したHTML要素を追加
parentElement.appendChild(newElement)