Element.
Lit ou remplace le contenu d’un élément sous forme de code HTML.
- Renvoie
- Une chaîne avec le code HTML du contenu de l’élément.
Exemple
#const menu = document.querySelector('#menu')
console.log(menu.innerHTML)
const items = ['Cours', 'Classement', 'Profil']
menu.innerHTML = items.map((item) => `<li>${item}</li>`).join('')
console.log(menu.children.length)
console.log(menu.innerHTML)Définition et utilisation
#La propriété innerHTML renvoie le code HTML de tous les enfants de l’élément sous forme de chaîne. Affecter une nouvelle chaîne supprime le contenu existant, et le navigateur analyse le texte comme du HTML pour en créer de nouveaux éléments.
C’est un moyen pratique d’insérer un fragment plus grand, par ex. construit dans un template literal. Rappelez-vous cependant que chaque affectation détruit les anciens éléments, avec les écouteurs d’événements qui leur étaient attachés et le texte saisi dans les champs de formulaire. De même, innerHTML += reconstruit tout le contenu depuis le début.
Le plus grand risque concerne la sécurité. Insérer du texte venant de l’utilisateur via innerHTML ouvre la voie à une attaque XSS : quelqu’un peut glisser des balises contenant du code qui s’exécutera sur votre page. Insérez les données externes via textContent, ou créez les éléments avec la méthode createElement().
Syntaxe
#const html = element.innerHTML
element.innerHTML = htmlStringPlus d’exemples
#const box = document.querySelector('#box')
const oldButton = document.querySelector('#buy')
box.innerHTML += '<p>Promotion : 20 % moins cher</p>'
console.log(document.querySelector('#buy') === oldButton)
console.log(oldButton.isConnected)Après +=, le navigateur a reconstruit le contenu depuis le début. Le nouveau bouton a la même apparence, mais c’est un élément différent, et l’écouteur d’événement attaché à l’ancien a cessé de fonctionner.
const greeting = document.querySelector('#greeting')
const userName = '<em>Lucas</em>'
greeting.innerHTML = `Salut, ${userName} !`
console.log(greeting.querySelector('em') !== null)
greeting.textContent = `Salut, ${userName} !`
console.log(greeting.querySelector('em') !== null)Avec innerHTML, les balises de la chaîne deviennent de vrais éléments. textContent les affiche comme du texte brut, c’est pourquoi il est sûr pour des données venant de l’utilisateur.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- N’insérez jamais via
innerHTMLdes données venant de l’utilisateur ou d’une API sans les nettoyer. Pour du texte, utiliseztextContent. - Évitez
innerHTML +=dans une boucle, car chaque étape reconstruit tout le contenu. Construisez d’abord la chaîne complète, ou utilisezinsertAdjacentHTML(). - Pour vider un élément,
element.innerHTML = ""ouelement.replaceChildren()suffit.
Entrées associées
#- innerHTML vs textContentinnerHTML lit et définit le code HTML d’un élément en l’analysant pour créer de nouveaux éléments, tandis que textContent lit et définit du texte brut, sans balises.
- Node.textContentLit ou définit tout le texte d’un élément, sans les balises HTML.
- Element.insertAdjacentHTML()Analyse une chaîne comme du HTML et insère les éléments obtenus à un endroit choisi par rapport à l’élément.
- document.createElement()Crée un nouvel élément HTML avec le nom de balise donné, prêt à être inséré dans la page.
- Template literalsDes templates de texte entre guillemets inversés : ils insèrent des valeurs via ${} et peuvent s’étendre sur plusieurs lignes.
- Element.append()Ajoute des éléments ou du texte à la fin du contenu d’un élément.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.