JavaScript で HTML 文字列を DOM 要素に変換するにはどうすればよいですか?

HTML 文字列から DOM 要素を作成する

JavaScript では、HTML 文字列を対応する DOM 要素に変換する必要がある場合があります。これは、ドキュメントに要素を追加する場合など、ページのコンテンツを動的に作成および操作するための基本的な操作です。

このタスクを実行するには、DOMParser を利用できます。 DOMParser を使用するための構文は次のとおりです。

const doc = new DOMParser().parseFromString(htmlString, "text/xml");

ここで、htmlString は変換する HTML コードを表し、doc は解析された DOM 要素を含む結果のドキュメントです。

たとえば、次のように考えます。次の HTML 文字列:

<div>
    <a href="#"></a>
    <span></span>
</div>

DOMParser を使用すると、次のように変換できます。この文字列を次のように DOM 要素に追加します。

const htmlString = "
";
const doc = new DOMParser().parseFromString(htmlString, "text/xml");

doc オブジェクトは、解析された HTML を DOM 要素として保持するようになり、appendChild():

const parentElement = document.getElementById('parent');
parentElement.appendChild(doc.firstChild);

これにより、解析された HTML コンテンツが実際の DOM のparentElement の子要素として追加されます。 DOMParser は、上記の例のように終了タグを必要とする XHTML スタイルの HTML を解釈することに注意してください。

以上がJavaScript で HTML 文字列を DOM 要素に変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。