JavaScript の document.write() に代わる最良の方法は何ですか?

JavaScript における物議を醸す document.write() の代替案

JavaScript 開発者は、多くの場合、悪名高い document.write() に遭遇することからその旅を始めます。関数。ドキュメント ストリームに直接書き込みます。ただし、潜在的な欠点があるため、その使用は強くお勧めできません。

document.write() を避ける理由

document.write() には、いくつかの欠点があります。

• 既存のコンテンツを上書きします: ページの読み込み後に呼び出される場合、ドキュメント全体が消去され、新しいコンテンツに置き換えられます。
• パフォーマンスの低下: document.write() は、処理要件が重いため、パフォーマンスの低下を引き起こす可能性があります。
• 厳密な XHTML との非互換性: 厳密な XHTML では無効ですmarkup.

document.write() の代替案

document.write() の代わりに、次のより適切な代替案を検討してください。

• innerHTML プロパティ: 内部を動的に変更します要素の HTML コンテンツ:

  document.getElementById("content").innerHTML = "New content";

  ログイン後にコピー

• createElement() および appendChild() メソッド: 新しい要素を作成してドキュメントに追加します:

  var newElement = document.createElement("div");
  newElement.textContent = "New content";
  document.body.appendChild(newElement);

  ログイン後にコピー

• createTextNode() およびappendChild() メソッド: テキスト ノードを作成してドキュメントに追加します:

  var newText = document.createTextNode("New content");
  document.body.appendChild(newText);

  ログイン後にコピー

• テンプレート リテラル: テンプレート リテラル (ES6) を使用して作成し、 HTML コンテンツをdocument:

  document.body.insertBefore(document.createTextNode(`<div>New content</div>`), document.body.firstChild);

  ログイン後にコピー

これらの代替案に従うことで、document.write() に関連する落とし穴を回避し、よりパフォーマンスが高く保守しやすい JavaScript コードを作成できます。

以上がJavaScript の document.write() に代わる最良の方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。