Quelles sont les meilleures alternatives au document.write() de JavaScript ?

Alternatives au controversé document.write() en JavaScript

Les développeurs JavaScript commencent souvent leur voyage en rencontrant le tristement célèbre document.write() fonction, qui écrit directement dans le flux de documents. Cependant, son utilisation est fortement déconseillée en raison de ses inconvénients potentiels.

Pourquoi éviter document.write()

document.write() présente plusieurs inconvénients :

• Écrase le contenu existant : Lorsqu'il est appelé après le chargement de la page, il efface l'intégralité du document et le remplace par un nouveau. contenu.
• Performances médiocres : document.write() peut entraîner une dégradation des performances en raison de ses exigences de traitement élevées.
• Incompatibilité avec le XHTML strict : Il n'est pas valide dans le balisage XHTML strict.

Alternatives à document.write()

Au lieu de document.write(), envisagez ces alternatives plus appropriées :

• propriété innerHTML : Dynamiquement modifier le contenu HTML interne d'un élément :

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

• createElement() et méthodes appendChild() : Créer et ajouter de nouveaux éléments au document :

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

• createTextNode() et appendChild() Méthodes : Créer et ajouter des nœuds de texte au document :

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

• Litéraux de modèle : Utilisez des littéraux de modèle (ES6) pour créer et insérer du contenu HTML dans le document :

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

En adhérant à ces alternatives, vous pouvez éviter les pièges associés à document.write() et écrire de manière plus performante et code JavaScript maintenable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!