Document.createElement()とappendChild()を使ったDOM要素の作成

2024-04-02

HTML文字列から新しいDOM要素を作成する（JavaScript、DOM、Prototype.js）

方法概要

以下の2つの方法を紹介します。

Document.createElement()とappendChild()を使う
Prototype.jsのElement.extend()を使う

Document.createElement()とappendChild()を使う

これは、JavaScript標準のAPIを用いた最も基本的な方法です。

手順

document.createElement()を使って、HTML要素のタグ名に対応する新しいDOM要素を作成します。
作成した要素に、innerHTMLプロパティを使ってHTML文字列を代入します。
appendChild()メソッドを使って、作成した要素を既存のDOMに追加します。

例

// 新しいdiv要素を作成
const div = document.createElement('div');

// HTML文字列を代入
div.innerHTML = '<p>Hello, world!</p>';

// body要素に追加
document.body.appendChild(div);

出力結果

<div>
  <p>Hello, world!</p>
</div>

Prototype.jsのElement.extend()を使う

Prototype.jsは、JavaScriptライブラリの一つです。Element.extend()メソッドを使うと、HTML文字列から新しいDOM要素を簡単に作成できます。

Prototype.jsを読み込みます。
Element.extend()メソッドを使って、HTML文字列を渡して新しいDOM要素を作成します。

<script src="https://prototypejs.org/dist/prototype.js"></script>

<script>
// HTML文字列から新しいdiv要素を作成
const div = Element.extend('<div><p>Hello, world!</p></div>');

// body要素に追加
document.body.appendChild(div);
</script>

<div>
  <p>Hello, world!</p>
</div>

どちらの方法も、HTML文字列から新しいDOM要素を作成できます。

シンプルで標準的な方法を使いたい場合は、Document.createElement()とappendChild()を使う方法がおすすめです。
より簡潔に記述したい場合は、Prototype.jsのElement.extend()を使う方法がおすすめです。

Document.createElement()とappendChild()を使う

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document.createElement()とappendChild()を使う</title>
</head>
<body>
<script>
// 新しいdiv要素を作成
const div = document.createElement('div');

// HTML文字列を代入
div.innerHTML = '<p>Hello, world!</p>';

// body要素に追加
document.body.appendChild(div);
</script>
</body>
</html>

Prototype.jsのElement.extend()を使う

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Prototype.jsのElement.extend()を使う</title>
  <script src="https://prototypejs.org/dist/prototype.js"></script>
</head>
<body>
<script>
// HTML文字列から新しいdiv要素を作成
const div = Element.extend('<div><p>Hello, world!</p></div>');

// body要素に追加
document.body.appendChild(div);
</script>
</body>
</html>

実行方法

上記コードをHTMLファイルに保存し、ブラウザで開くと、<h1>Hello, world!</h1>という見出しが表示されます。

上記コードは基本的な例です。必要に応じて、コードを修正して様々なDOM要素を作成できます。
Prototype.jsを使用する場合は、事前にライブラリを読み込む必要があります。

HTML文字列から新しいDOM要素を作成するその他の方法

document.createRange().createContextualFragment()を使う

この方法は、HTML文字列をDOMフラグメントに変換してから、appendChild()メソッドを使って既存のDOMに追加します。

// HTML文字列をDOMフラグメントに変換
const fragment = document.createRange().createContextualFragment('<div><p>Hello, world!</p></div>');

// body要素に追加
document.body.appendChild(fragment);

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
// HTML文字列から新しいdiv要素を作成
const div = $('<div><p>Hello, world!</p></div>');

// body要素に追加
$('body').append(div);
</script>

innerHTMLプロパティを使って、既存のDOM要素の内部HTMLをHTML文字列に置き換えることで、新しいDOM要素を作成できます。

<div id="target"></div>

<script>
// HTML文字列をtarget要素に挿入
document.getElementById('target').innerHTML = '<p>Hello, world!</p>';
</script>

DOMParserは、HTML文字列をDOMツリーに変換するAPIです。

// HTML文字列をDOMツリーに変換
const doc = new DOMParser().parseFromString('<div><p>Hello, world!</p></div>', 'text/html');

// body要素から子要素を取り出して追加
document.body.appendChild(doc.body.firstElementChild);