HTML を JavaScript に埋め込む

ハイパーテキスト マークアップ言語は、インターネット上に表示されるすべての Web ページのルートにあります。 HTML DOM は、DOM のノードを変更することによって自動的に更新されます。

これは、既存の DOM 構造を更新するか、新しいノードを追加することで実行できます。 今日の記事では、HTML を JavaScript に埋め込む方法について学びます。

HTML を JavaScript に埋め込む

要素の innerHTML プロパティは、要素に含まれる HTML または XML マークアップを取得または設定します。

ドキュメントに HTML を挿入するには、要素のコンテンツを置き換える代わりに、insertAdjacentHTML() メソッドを使用します。

innerHTML が設定されると、要素の子孫はすべて削除されます。 innerHTML は、提供された HTML を htmlString 文字列に解析して作成されたノードに置き換えます。

要素の子孫の HTML シリアル化を文字列として返します。

以下の手順は、バックグラウンドで innerHTML を設定した後に実行されます。

1. 指定された値は HTML または XML (ドキュメント タイプに応じて) として解析され、新しい要素の DOM ノードの新しいセットを表す DocumentFragment オブジェクトが生成されます。
2. コンテンツが置き換えられる要素がテンプレート要素の場合、テンプレート要素の content 属性は、手順 1 で作成された新しい DocumentFragment に置き換えられます。
3. 他のすべての要素については、要素のコンテンツが新しい DocumentFragment のノードに置き換えられます。

正しく形成されていない HTML 文字列を使用して innerHTML の値を設定しようとすると、SyntaxError がスローされます。 innerHTML の innerHTML ドキュメントに関する詳細情報を見つけることができます。

例でそれを理解しましょう。

<div id="list-id"></div>

document.getElementById('list-id').innerHTML =
    '<ol><li>html data</li><li>JS data</li></ol>';

上記のコードでは、1つの div タグを定義しています。 getElementById を使用して div タグにアクセスし、div タグの innerHTML プロパティにアクセスして順序付きリストを追加できます。

出力：

1. html data
2. JS data

デモはこちら