HTML 文字列から DOM 要素を作成する方法 (複数の方法)

単純な動的 HTML DOM 要素を作成する必要がある場合は、HTML 文字列テンプレートを使用できます。 JavaScript でこれを実現するにはさまざまな方法がありますが、考慮すべき点がいくつかあるかもしれません。

---

内部HTML

const container = document.createElement('div');
container.innerHTML = `<div>Hello World</div>`;
const node = container.firstElementChild;

これは最も一般的な方法の 1 つです。 HTML 文字列をコンテナ要素の innerHTML に挿入し、生成された DOM ノードにアクセスします。

ただし、処理できるのは有効な HTML ノード、つまり標準の HTML 構造で正当な要素のみです。たとえば、 を挿入しようとすると、要素を

に追加すると、ノードは作成されません。

さらに、このメソッドは HTML 文字列内のスクリプトを実行しないため、信頼できないコンテンツを扱う場合はより安全です。

innerHTML + テンプレート要素

const template = document.createElement('template');
template.innerHTML = `<div>Hello World</div>`;
const node = template.content.firstElementChild;

を使用する利点タグにはコンテンツの制限がなく、 のようなテーブル関連の要素を含むあらゆる種類の HTML 構造を含めることができるという点です。そして

挿入隣接HTML

const container = document.createElement("div");
container.insertAdjacentHTML("afterbegin", `<div>Hello World</div>`);
const node = container.firstElementChild;

このメソッドは innerHTML に似ており、有効な HTML ノードのみを処理できます。また、スクリプトは実行されません。

DOMParser

const node = new DOMParser().parseFromString(`<div>Hello World</div>`, "text/html").body.firstElementChild;

このメソッドは、完全な HTML ドキュメントを作成して文字列を解析し、ドキュメントからノードを抽出します。これは、他のソリューションよりも比較的遅いため、使用はお勧めできないことを意味します。

有効な HTML ノードのみを処理でき、スクリプトは実行されません。

Range.createContextualFragment

const node = document.createRange().createContextualFragment(`<div>Hello World</div>`).firstElementChild;

この方法はおそらく最も簡単です。また、デフォルトでは有効な HTML ノードのみを処理できます。ただし、これを回避するためにコンテキストを設定できます。

HTML 文字列内のスクリプトを実行するので、DOMPurify などのクリーナーを使用するなど、信頼できないコンテンツを扱う場合は特に注意してください。

結論

さまざまなケースに応じて、最適な方法を選択する必要がある場合があります。

私のコンテンツが役立つと思われる場合は、 購読をご検討ください。 Web 開発の最新情報を含むニュースレターを毎日送信します。ご支援ありがとうございます!

以上がHTML 文字列から DOM 要素を作成する方法 (複数の方法)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript html String if for try using default dom this innerHTML table td tr Access

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。