Bases de JavaScript

Afficher du texte avec document.getElementById()

Chaque élément HTML possède un attribut id qui permet de l'identifier sans équivoque et d'un attribut innerHTML qui définit son contenu.

En récupérant l'élément HTML à l'aide de la méthode document.getElementById(id) et en modifiant son contenu via son attribut innerHTML, on peut dynamiquement modifier complètement ou en partie ce qui est affiché dans la page Web.

Pour afficher la sortie d'un code JavaScript avec cette approche, il suffit de créer un document HTML de base, d'y inclure un élément (par exemple div ou p) et d'affecter la sortie dans l'attribut innerHTML de cet élément comme dans l'exemple suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Afficher du texte</title>
</head>
<body>
  <p style="font-weight:bold">Sortie du script :</p>
  <p id="sortie"></p>

  <script>
    let texte = "J'aime les patates."
    document.getElementById("sortie").innerHTML = texte;
  </script>
</body>
</html>