【JavaScript】HTML要素を新規作成するcreateElementメソッドを解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。

この記事では、 JavaScriptでHTML要素を新規作成するcreateElementメソッドについて

createElementメソッドとは
createElementメソッドを使ったサンプルプログラム

と、丁寧に解説していきます。

前提条件：実行環境について
createElementメソッドとは
createElementメソッドを解説するプログラムの概要
1. HTMLサンプルプログラム
2. JavaScriptサンプルプログラム
実行結果
まとめ：createElementメソッドを使ってみよう

前提条件：実行環境について

実行環境は以下の通りです。

OS	Windows10

createElementメソッドとは

createElementメソッドとは、引数に指定したHTML要素を新規作成し、作成した要素を返すメソッドです。

使い方は以下になります。

var result = document.createElement('div')

1	var result = document.createElement('div')

変数resultには、createElementメソッドで新規作成されたdiv要素が返されます。

では、次の章で実際に使ってみます。

createElementメソッドを解説するプログラムの概要

createElementメソッドを解説するプログラムでは、

HTML
JavaScript

の2ファイルを使います。

HTML内でリストを作成しておきます。
JavaScriptで、createElementshiftメソッドを使ってli要素を作成しリストに追加して表示させます。

フォルダ構成は以下のようになっています。
createElementメソッドを解説するフォルダ構成

HTMLサンプルプログラム

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>createElementメソッドサンプル</title>
    </head>
    <body>
        <h2>createElementメソッドで追加したリスト</h2>
        <ul id="fruits">
            <li>リンゴ</li>
            <li>みかん</li>
        </ul>
        <script src="js\sample_javascript.js"></script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>createElementメソッドサンプル</title>

</head>

<body>

<h2>createElementメソッドで追加したリスト</h2>

</ul>

</body>

</html>

HTMLで外部のJavaScriptを読み込むやり方とリスト表すul要素については、以下の記事をご参考ください。

外部のJavaScriptを読み込むやり方
HTMLで外部のJavaScriptを読み込むやり方を解説します

ul要素
【HTML】順不同の箇条書きのリストを表すul要素を解説します

JavaScriptサンプルプログラム

// 要素を作成
var sampleLi = document.createElement('li')
sampleLi.innerHTML = 'ブドウ'

// 追加した要素をリストに追加
var fruits = document.getElementById('fruits')
fruits.appendChild(sampleLi)

// 要素を作成

var sampleLi = document.createElement('li')

sampleLi.innerHTML = 'ブドウ'

// 追加した要素をリストに追加

var fruits = document.getElementById('fruits')

fruits.appendChild(sampleLi)

appendChildメソッド
getElementByIdメソッド
innerHTMLプロパティ

については、こちらの記事をご参考ください。

appendChildメソッド
【JavaScript】指定した要素に子要素を追加するappendChildメソッドを解説します

getElementByIdメソッド
【JavaScript】指定したidの要素を取得するgetElementByIdメソッドについて解説します

innerHTMLプロパティ
【JavaScript】HTML要素の取得や書き換えができるinnerHTMLプロパティを解説します

実行結果

作成したHTMLをブラウザで開きます。

JavaScriptのcreateElementメソッドの実行確認

リストにcreateElementメソッドで新規作成したリストの項目が追加できているとが確認できました。

まとめ：createElementメソッドを使ってみよう

以上がJavaScriptのcreateElementメソッドについての解説でした！

あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ