Modifier un document HTML depuis un programme Javascript

1. Modifier le texte à l'intérieur d'une balise

Pour modifier le texte à l'intérieur d'une balise, le plus simple est d'utiliser la propriété textContent de l'objet du DOM représentant la balise, comme cela est présenté dans l'exemple disponible ici.

NB: cette propriété ne doit être utilisée que pour accéder et/ou modifier uniquement une zone de texte, sans balise HTML. Dans ce dernier cas, il est possible d'utiliser la propriété innerHTML comme l'illustre l'exemple suivant.

NB2: : il est fortement déconseillé d'utiliser la propriété innerHTML pour modifier autre chose qu'un simple texte et ainsi modifier la structure du document, à moins d'avoir validé proprement le bout de document ainsi inséré. En effet, cela peut engendrer des problèmes de sécurité. De plus, c'est beaucoup moins efficace que de créer manuellement les nouveaux noeuds du document. Vous trouverez ici une page illustrant ces aspects.

2. Modification d'un attribut d'une balise

Pour modifier la valeur d'un attribut, on peut utiliser la méthode setAttribute(nomAttribut, valeurAttribut) de l'objet du DOM représentant la balise, comme cela est présenté ici.

3. Modifier le style CSS associé à une balise

Le style appliqué à un élément HTML (par défaut ou via une feuille de style CSS) peut être localement complété ou modifié via la propriété javascript style du noeud du DOM correspondant à la balise HTML ciblée. Le site MDN fait une courte présentation de cette balise .
Voici de plus un exemple d'utilisation pour modifier la couleur du texte d'une balise pre. Notez qu'après avoir cliqué sur le bouton, les 2 paragraphes se voient tout deux appliqués le style associé à la balise pre dans la feuille de style. Mais le second paragraphe a une couleur de texte différente en raison de sa propriété style.
Le site w3schools fournit une liste des principales propriétés CSS modifiables via la propriétés style.

4. Pour aller plus loin : Modification de la structure du document

a. Ajouter un noeud dans l'arbre

Pour ajouter un nouveau noeud (une nouvelle balise) au document, il faut :

1. Crééer le noeud en question grâce à la méthode createElement("nomBalise") de l'objetdocument ;
2. Récupérer le noeud correspondant au futur parent du nouveau noeud (ie. la balise englobante);
3. Ajouter le noeud comme fils à son parent, grâce à la méthode appendChild.

Ceci est illustré ici.

b. Supprimer un noeud

Pour supprimer un noeud du DOM, il faut appeler la méthode removeChild sur son noeud parent en passant l'objet représentant le noeud du DOM à Supprimer.

Ceci est illustré ici.

Pour aller plus loin : Exercices sur les formulaires