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

document.write の代替案: 回避する理由と代わりに何を使用するか

document.write を回避する

HTML 内チュートリアルでは、document.write() が一般的に紹介されていますが、その使用は推奨されないことがよくあります。これは、 document.write には次のような厳しい制限があるためです:

• ドキュメント全体を上書きします: ページが読み込まれた後に使用すると、 document.write() は既存の HTML 全体をクリアして置き換えます。
• 無効な XHTML: document.write() は厳密な XHTML では無効です。 code.
• パフォーマンスの問題: document.write() は、特に繰り返し使用するとブラウザのパフォーマンスに悪影響を及ぼす可能性があります。

document.write の代替案

ほとんどの場合に適した document.write の代替手段をいくつか示します。状況:

createElement() および appendChild()

このアプローチには、createElement() を使用して新しい HTML 要素を作成し、appendChild() を使用してそれを DOM に追加することが含まれます。既存のページを上書きせずにコンテンツを挿入できます。

innerHTML

innerHTML は、既存の要素内にコンテンツを設定するために使用できるプロパティです。このメソッドは、コンテンツの残りの部分に影響を与えることなく、ページの特定の部分を更新する場合に便利です。

insertAdjacentHTML()

このメソッドを使用すると、HTML コードを相対的に挿入できます。指定された要素。要素の前、後、または要素内に挿入するためのさまざまなオプションが用意されています。

例

createElement() と appendChild() の使用法を説明するには、次のことを考慮してください。コード:

const container = document.getElementById('container');
const newElement = document.createElement('p');
newElement.textContent = 'Hello, world!';
container.appendChild(newElement);

このコードは

を作成します。 「Hello, world!」というテキストを含む要素そして、既存のコンテンツを上書きせずにコンテナ要素に追加します。

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