[JavaScript] 要素を生成する（document.createElement）

投稿日：2018年9月30日

JavaScriptでHTMLの要素を生成するには、document.createElementを使用します。

サンプルソース

例）ボタンを押すと、div要素を生成する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>要素を生成するサンプル</title>
<script>
function test(){
  //div要素を生成
  var e = document.createElement('div');

  //生成した要素にIDを指定
  e.id = 'd1';

  //生成した要素に内容を追加
  e.innerText = 'hoge';

  //生成した要素にスタイルを指定
  e.style.backgroundColor = 'yellow';

  //body内の一番最後に要素を追加
  document.body.appendChild(e);
}
</script>
</head>
<body>
  <input type="button" value="ボタン" onclick="test();">
</body>
</html>

<!DOCTYPE html>

<head>

<title>要素を生成するサンプル</title>

function test(){

//div要素を生成

var e = document.createElement('div');

//生成した要素にIDを指定

e.id = 'd1';

//生成した要素に内容を追加

e.innerText = 'hoge';

//生成した要素にスタイルを指定

e.style.backgroundColor = 'yellow';

//body内の一番最後に要素を追加

document.body.appendChild(e);

}

</script>

</head>

<body>

</body>

</html>

9行目で要素を生成し、21行目で要素を反映させています。

解説

引数にHTMLに存在しないタグ名を指定しても、問題ありません。
ただ、HTMLとしては解析されないので表示は保証しません。

執筆者：とら