JavaScript document.createElement() 実践的な例

概要: このチュートリアルでは、JavaScript の document.createElement() を使用して新しい HTML 要素を作成し、それを DOM ツリーにアタッチする方法を学びます。

HTML 要素を作成するには、document.createElement() メソッドを使用します。

let element = document.createElement(htmlTag);Code language: JavaScript (javascript)

document.createElement() は HTML タグ名を受け取り、Element 型の新しい Node を返します。

1) 新しい div の作成例

次の HTML ドキュメントがあると仮定します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS CreateElement Demo</title>
</head>
<body>

</body>
</html>Code language: HTML, XML (xml)

次の例では、document.createElement() を使用して新しい <div> 要素を作成します。

let div = document.createElement('div');Code language: JavaScript (javascript)

そして、HTML スニペットを div に追加します。

div.innerHTML = '<p>CreateElement example</p>';Code language: JavaScript (javascript)

div をドキュメントにアタッチするには、appendChild() メソッドを使用します。

document.body.appendChild(div);Code language: JavaScript (javascript)

すべてをまとめると、次のようになります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript CreateElement() Demo</title>
</head>
<body>
    <script>
        let div = document.createElement('div');
        div.id = 'content';
        div.innerHTML = '<p>CreateElement example</p>';
        document.body.appendChild(div);
    </script>
</body>
</html>Code language: HTML, XML (xml)

div に id を追加する

div に id を追加する場合は、要素の id 属性に値を設定します。例:

let div = document.createElement('div');
div.id = 'content';
div.innerHTML = '<p>CreateElement example</p>';

document.body.appendChild(div);Code language: JavaScript (javascript)

div にクラスを追加する

次の例では、新しい div の CSS クラスを note に設定します。

let div = document.createElement('div');
div.id = 'content';
div.className = 'note';
div.innerHTML = '<p>CreateElement example</p>';

document.body.appendChild(div);Code language: JavaScript (javascript)

div にテキストを追加する

<div> にテキストを追加するには、上記の例のように innerHTML プロパティを使用するか、新しい Text ノードを作成して div に追加できます。

// create a new div and set its attributes
let div = document.createElement('div');
div.id = 'content';
div.className = 'note';

// create a new text node and add it to the div
let text = document.createTextNode('CreateElement example');
div.appendChild(text);

// add div to the document
document.body.appendChild(div);Code language: JavaScript (javascript)

div に要素を追加する

要素を div に追加するには、要素を作成し、appendChild() メソッドを使用して div に追加します。

let div = document.createElement('div');
div.id = 'content';
div.className = 'note';

// create a new heading and add it to the div
let h2 = document.createElement('h2');
h2.textContent = 'Add h2 element to the div';
div.appendChild(h2);

// add div to the document
document.body.appendChild(div);Code language: JavaScript (javascript)

2) 新しいリスト項目 (li) の作成例

項目のリストがあるとします。

<ul id="menu">
    <li>Home</li>
</ul>Code language: JavaScript (javascript)

次のコードは、2 つの li 要素を ul に追加します。

let li = document.createElement('li');
li.textContent = 'Products';
menu.appendChild(li);

li = document.createElement('li');
li.textContent = 'About Us';

// select the ul menu element
const menu = document.querySelector('#menu');
menu.appendChild(li);Code language: JavaScript (javascript)

出力

<ul id="menu">
    <li>Home</li>
    <li>Products</li>
    <li>About Us</li>
</ul>Code language: HTML, XML (xml)

3) script 要素の作成例

場合によっては、JavaScript ファイルを動的にロードしたい場合があります。これを行うには、document.createElement() を使用して script 要素を作成し、それをドキュメントに追加します。

次の例は、新しい script 要素を作成し、/lib.js ファイルをドキュメントにロードする方法を示しています。

let script = document.createElement('script');
script.src = '/lib.js';
document.body.appendChild(script);Code language: JavaScript (javascript)

最初に、URL から JavaScript ファイルをロードする新しいヘルパー関数を作成できます。

function loadJS(url) {
    let script = document.createElement('script');
    script.src = url;
    document.body.appendChild(script);
}Code language: JavaScript (javascript)

次に、ヘルパー関数を使用して /lib.js ファイルをロードします。

loadJS('/lib.js');Code language: JavaScript (javascript)

JavaScript ファイルを非同期でロードするには、script 要素の async 属性を true に設定します。

function loadJSAsync(url) {
    let script = document.createElement('script');
    script.src = url;
    script.async = true;
    document.body.appendChild(script);
}Code language: JavaScript (javascript)

まとめ

document.createElement() は新しい HTML 要素を作成します。
element.appendChild() は HTML 要素を既存の要素に追加します。

クイズ

このチュートリアルは役に立ちましたか？