ホームページ >ウェブフロントエンド >jsチュートリアル >「div.innerHTML = str;」を使用せずに HTML 文字列を DOM に安全に追加する方法

「div.innerHTML = str;」を使用せずに HTML 文字列を DOM に安全に追加する方法

How to Safely Append HTML Strings to the DOM Without Using `div.innerHTML = str;`?

div.innerHTML を使用せずに HTML 文字列を DOM に追加する

div.innerHTML = str; を使用して HTML 文字列を DOM に追加します。便利かもしれませんが、セキュリティ上の脆弱性があるため推奨されません。より安全で堅牢なアプローチは、insertAdjacentHTML() メソッドを利用することです。

insertAdjacentHTML() の使用

insertAdjacentHTML() は、HTML 文字列をドム。 2 つのパラメータを取ります:

position: ターゲット要素を基準にして HTML を挿入する場所を指定します。「beforebegin」、「afterbegin」、「beforeend」、または「afterend」を指定できます。
html: 挿入する HTML 文字列。

この場合、指定された HTML 文字列を

に追加します。 ID が「test」の場合、次のコードを使用できます:

<code class="javascript">const div = document.getElementById("test");
div.insertAdjacentHTML("beforeend", str);</code>

「beforeend」位置は、

内の最後の子の後に HTML を挿入します。

ブラウザの互換性

insertAdjacentHTML() は、Chrome、Firefox、Safari、Edge を含むすべての最新ブラウザでサポートされています。

ライブデモ

デモについては、次の JSFiddle にアクセスしてください: http://jsfiddle.net/euQ5n/

以上が「div.innerHTML = str;」を使用せずに HTML 文字列を DOM に安全に追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

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

続きを見る