innerHTML et la compatibilité

innerHTML est une propriété de tout élément HTML qui désigne le contenu qui se trouve entre la balise entrante et la balise fermante.

Dans l'exemple ci-dessous, innerHTML a pour valeur "un texte":

<p>
un texte
</p>

On l'utilise pour lire pour insérer dynamiquement un contenu dans une page.
Au-delà de l'insertion de texte simple, des différences peuvent apparaître dans son fonctionnement selon les navigateurs.

Il a d'abord été implémenté dans Internet Explorer 5 puis repris par tous les navigateurs. Depuis HTML 5, il fait partie du standard et est maintenant une propriété de HTMLElement et HTMLDocument.

Utilisation d'innerHTML

Soit l'élément suivant:

<p id="pid">
  un texte.
</p>

On peut obtenir le contenu du paragraphe avec ce code:

var x = document.getElementById("pid");
alert(x.innerHTML);

On peut remplacer dynamiquement le contenu du paragraphe avec ce code:

var x = document.getElementById("pid");
x.innerHTML = "un autre texte";

Démonstration ci dessous:

un texte

Le paragraphe contient au départ "<i>un texte</i>", remplacé par "<i>un autre texte</i>" quand on clique sur le bouton.

Il est possible ainsi de remplacer le contenu de toute balise, et d'y insérer un code plus complexe qu'un texte avec des balises imbriquées.

Dans la démonstration, on insère une image dans la page en insérant une balise <img> dans le code source, ou du code plus complexe.

Démonstration: Insérer dynamiquement un contenu dans une page

Un contenu défini par vous même sera inséré au dessous du formulaire.

Par exemple, faites un copier/coller du code suivant:
<img src="https://www.xul.fr/images/apricot.jpg" />

Formulaire d'interaction

Votre contenu
Sera inséré ici.

Le code HTML:

<fieldset><legend>Votre contenu</legend>
   <div id="storage">Sera inséré ici.
   </div>
</fieldset>

Le code JavaScript: 

<script>
function generation(storageid, fieldid)
{
  var x = document.getElementById(storageid);
  var y = document.getElementById(fieldid);
  x.innerHTML = y.value;
}
</script>

HTML 5

HTML 5 standardise deux nouveaux attributs, innerHTML et outerHTML.

Les deux attributs permettent de lire le contenu d'une balise ou du document entier. Ils permettent de remplacer le contenu d'une balise ou lui ajouter un nouveau contenu.

Différence entre innerHTML et outerHTML

L'attribut outerHTML comme innerHTML s'applique à un élément de la page, une balise. Mais outerHTML représente un élément et son contenu, tandis que innerHTML ne représente que le contenu.

outerHTML peut être utilisé pour retourner le contenu du document entier mais pas pour remplacer le document entier.
Plus clairement, on peut écrire document.innerHTML="" mais pas document.outerHTML = "".

Méthodes DOM

On résoud les problèmes de compatibilité en utilisant des méthodes de manipulation du Document Object Model.

Créer un élément, une image par exemple:

var x = document.createElement('img');

Lui assigner des attributs, en l'occurence, puisque c'est une image indiquer la source:

x.src="https://www.xul.fr/images/maurice.jpg";

Attacher le nouveau code à une balise existante:

var t = document.getElementById("storage");
t.appendChild(x);

Ce code est inséré dans la page. Le résultat:

Le code complet:

<script>
function insertImg()
{
  var x = document.createElement('img');
  x.src="https://www.xul.fr/images/maurice.jpg";  
  var t = document.getElementById("storage");
  t.appendChild(x); 
}
window.onload=insertImg;
</script>

<p id="storage"></p>

Pour insérer du texte on utilisera la méthode:

document.createTextNode('un texte');

Et pour intégrer plusieurs éléments imbriqués, on utilise appendChild soit sur le parent, pour ajouter un second élément après le premier, soit sur cet élément pour lui ajouter un contenu.

var t = document.getElementById("storage");
t.appendChild(x);
t.appendChild(document.createTextNode('Grappe de raisin'));

Démonstration

Code à insérer:

<div align="center">
<img src="https://www.xul.fr/images/grape.jpg" />
<br>
Grappe de raisin
</div>

Il peut être inséré directement avec innerHTML.

La génération du code avec les méthodes de DOM suit les étapes suivantes:

  1. Création d'un calque.
  2. On lui assigne un attribut d'alignement.
  3. Création d'une balise image.
  4. On assigne à l'attribut src l'URL d'une image.
  5. On ajoute comme descentant du calque cette balise.
  6. Un nouveau descendant est ajouté, une balise <br>.
  7. Puis un texte est créé et ajouté aux deux autres balises.

Le code complet: 

function insertText()
{
  var layer = document.createElement('div');
  layer.align="center";
  var img = document.createElement('img');
  img.src="https://www.xul.fr/images/grape.jpg";  
  var storage = document.getElementById("storage2");
  storage.appendChild(layer);
  layer.appendChild(img); 
  layer.appendChild(document.createElement('br'));
  layer.appendChild(document.createTextNode('Grappe de raisin'));
}

function inserts()
{
  insertImg();
  insertText();
}

window.onload=inserts;

Voir aussi: Les méthodes de l'objet Node.

© 2010-2022 Xul.fr