Très utilisée par les développeurs JavaScript dans les cas où ils souhaitent modifier le contenu d'une balise HTML, la propriété innerHTML n'en est pas moins "éphémère " : mise en place par Microsoft, elle a trouvé son chemin au sein de nombreux navigateurs, à l'époque où il fallait être compatible IE ou mourir.

Nonobstant, elle ne fait pas partir des spécifications du DOM (le standard de manipulation des documents HTML, entre autres), qui dispose de méthodes adéquates.

En outre, cette propriété aide à maintenir dans le code JavaScript des balises HTML qui n'y ont pas leur place, à l'instar de document.write().

Le DOM propose donc une alternative certes parfois plus laborieuse, mais assurément plus rigoureuse. Ainsi, pour remplacer le contenu d'une balise, la méthode IE serait :

document.all["textDiv"].innerHTML = "Texte de remplacement";

tandis que les navigateurs modernes autorisent :

longueurCible = document.getElementById("textDiv").firstChild.length;
document.getElementById("textDiv").firstChild.replaceData(0, longueurCible, "Texte de remplacement");

De même, la création pure de balise devient plus stricte à mettre en oeuvre :

document.body.innerHTML = "<p>Mon texte</p>";

devient

texte=document.createTextNode("hello world");
cible=document.createElement("p");
cible.appendChild(texte);
document.body.appendChild(cible);

Forum

Réagissez dans les forums de JDN Développeurs