HTML 文字列から DOM 要素を作成する方法 (複数の方法)-jsチュートリアル-php.cn

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

PHPz

リリース： 2024-08-01 20:18:42

オリジナル

1197 人が閲覧しました

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

内部HTML

How to Create DOM Elements from HTML Strings (Multiple Methods)

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

ログイン後にコピー

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

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

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

How to Create DOM Elements from HTML Strings (Multiple Methods)

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

innerHTML + テンプレート要素

How to Create DOM Elements from HTML Strings (Multiple Methods)

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

ログイン後にコピー

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

How to Create DOM Elements from HTML Strings (Multiple Methods)

挿入隣接HTML

How to Create DOM Elements from HTML Strings (Multiple Methods)

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

ログイン後にコピー

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

DOMParser

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

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

ログイン後にコピー

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

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

Range.createContextualFragment

How to Create DOM Elements from HTML Strings (Multiple Methods)

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

ログイン後にコピー

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

How to Create DOM Elements from HTML Strings (Multiple Methods)

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

How to Create DOM Elements from HTML Strings (Multiple Methods)

結論

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

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

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