Afficher l'année actuelle en JavaScript en 3 étapes

Étape 1 : Préparer l'élément HTML

La première étape consiste à ajouter un élément dans votre HTML à l'endroit où vous souhaitez afficher l'année. On utilise une balise <span> avec un id unique pour pouvoir le cibler facilement depuis JavaScript :

<footer>
  <p>© <span id="current-year"></span> Mon Site. Tous droits réservés.</p>
</footer>

Le <span> est vide pour l'instant — c'est JavaScript qui se chargera de le remplir automatiquement.

Étape 2 : Récupérer l'année actuelle avec JavaScript

En JavaScript, l'objet Date permet d'accéder à la date et l'heure actuelles. La méthode getFullYear() retourne l'année en cours sous forme d'un nombre à 4 chiffres (ex : 2026) :

const annee = new Date().getFullYear();

console.log(annee); // Affiche 2026 (ou l'année en cours)

new Date() crée un objet représentant la date et l'heure actuelles, et getFullYear() en extrait uniquement l'année. Pas besoin de la mettre à jour chaque année : elle sera toujours à jour automatiquement.

Étape 3 : Injecter l'année dans le HTML

Il ne reste plus qu'à cibler l'élément HTML créé à l'étape 1 avec getElementById() et à y insérer l'année via textContent :

document.getElementById("current-year").textContent = new Date().getFullYear();

C'est tout ! Le footer affichera désormais l'année en cours, et se mettra à jour automatiquement chaque année sans aucune intervention de votre part.

Le code complet

En combinant les 3 étapes, voici le résultat final :

<!-- HTML -->
<footer>
  <p>© <span id="current-year"></span> Mon Site. Tous droits réservés.</p>
</footer>

<!-- JavaScript -->
<script>
  document.getElementById("current-year").textContent = new Date().getFullYear();
</script>

Pourquoi utiliser textContent plutôt que innerHTML ?

Pour insérer du texte simple, textContent est préférable à innerHTML pour deux raisons :

• Sécurité : textContent n'interprète pas le contenu comme du HTML, ce qui évite tout risque d'injection de code malveillant (XSS).
• Performance : textContent est légèrement plus rapide car le navigateur n'a pas à parser du HTML.

Dans notre cas, on insère un simple nombre (l'année), donc textContent est le bon choix.