Cours 3.8. Modifier le HTML

.innerText

Jusqu'à présent, nous avons surtout utilisé la propriété innerHTML qui permet de modifier le contenu d'une balise HTML. Il en existe d'autre qui vont permettre de modifier d'autres propriétés des éléments HTML :

let element = getElementById ('Mon identifiant');
element.innerText = "Nouveau contenu";

.innerHTML

innerText ne permet d'insérer que du texte. Si vous souhaitez insérer du HTML, vous devrez utiliser la propriété innerHTML :

element.innerHTML = '<img src="image.jpg">';

L'exemple ci-dessous insère une image dans une balise HTML.

.style

La propriété .style permet de modifier le style CSS d'une balise HTML. La syntaxe générale est présentée ci-dessous :

element.style.property = new_style;

Voici quelques exemples :

element.style.color = 'red';
element.style.fontWeight = 'bold';
element.style.backgroundColor = '#FF00FF';
element.style.paddingTop  = '100px';

L'exemple ci-dessous permet de modifier les styles CSS d'un paragraphe :

setAttribute

La fonction setAttribute() permet de modifier l'attribut d'une balise HTML. La syntage générale est donnée par :

element.setAttribute(name, value)

Voici quelques exemples :

element.setAttribute('src',  "image.png";
element.setAttribute('href', "https://www.google.com";
element.setAttribute('style', "color:red;";

L'exemple ci-dessous permet de modifier l'attribut src d'une image :

Exercices

Exercice 1

Modifier le code ci-dessous afin que le texte prenne la couleur du bouton qui est cliqué :

<p id="text">Cliquez pour changer ma couleur.</p>

<button>Rouge</button>
<button>Vert</button>
<button>Blue</button>
<button>Noir</button>

Voici le résultat escompté :

Exercice 2

Modifier le code ci-dessous afin le lien soit modifié au moment où l'utilisateur clique dessus. Le nouveau lien sera https://lucidar.me/fr/ :

<a href="https://www.google.com" target="_blank">Google</a>

Notez que ce type de lien est à éviter. Voici le résultat attendu :

Quiz

Quelle propriété permet de modifier le texte d'une balise ?

Vérifier Bravo ! Qui peut le plus peut le moins : .innerHtml permet aussi de modifier le contenu, même s'il n'y a pas de HTML dedans. Essaie encore ...

Quelle syntaxe permet de modifier le style d'une balise HTML ?

Vérifier Bravo ! En écrivant .setAttribute('style', 'colo:red') on peut aussi modifier le style CSS. Essaie encore ...

Quelle syntaxe permet de modifier l'image suivante :

<img src="sad.jpg">
Vérifier Bravo ! Ici, on veut modifier l'attribut src de la balise img. Essaie encore ...

Voir aussi


Dernière mise à jour : 10/10/2022