「document.write()」を避ける理由と最良の代替手段は何ですか?

document.write() の代替案とそれを避ける理由

チュートリアルでよく見られるにもかかわらず、document.write() の使用) は、その破壊的な性質と HTML に準拠していないため、広く推奨されていません。

document.write() を回避する理由:

• ドキュメントの置換: document.write() はドキュメント全体を置換します。 、既存のコンテンツも含みます。これは、ページが読み込まれた後に使用すると、致命的な結果を招く可能性があります。
• 無効な XHTML: XHTML では、 document.write() はドキュメント構造を無視しているため、無効なコードです。
• パフォーマンスの問題: document.write() は再解析を強制するためブラウザの速度を低下させます。

document.write() の代替案:

幸いなことに、document.write() の代替案があり、どちらも効果的です。標準準拠:

• innerHTML プロパティ: Thisプロパティを使用すると、ドキュメント全体を置き換えずに HTML 要素のコンテンツを変更できます。例: element.innerHTML = "新しいコンテンツ";
• createElement() メソッド: 新しい HTML 要素を作成し、ドキュメントに追加します。例: document.createElement("p").innerHTML = "新しい段落";
• createTextNode() メソッド: テキスト ノードを作成し、HTML 要素に追加します。例: element.appendChild(document.createTextNode("New Text"));

例:

次の HTML を考えてみましょう:

<p>This is an innocent HTML page.</p>

innerHTML を使用して動的に変更するcontent:

<script>
  document.querySelector("p").innerHTML = "This page is now modified.";
</script>

これにより、周囲のドキュメントに影響を与えることなく段落のコンテンツが変更されます。このアプローチは、 document.write().

を使用するよりも安全で効率的です。

以上が「document.write()」を避ける理由と最良の代替手段は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。