Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

Les propriétés DOM innerHTML et outerHTML vous permettent de lire et d'écrire du contenu sur une page Web. Vous pouvez les utiliser pour récupérer le balisage ou y apporter des modifications, et les deux sont similaires à bien des égards. Mais il y a une différence significative.

Lorsque vous travaillez avec le DOM, vous utiliserez innerHTML et outerHTML assez différemment. Découvrez comment utiliser ces deux propriétés avec des exemples pratiques.

Qu'est-ce que le HTML interne ?

La propriété innerHTML fait partie de les DOM et vous pouvez y accéder via JavaScript. Vous pouvez l'utiliser pour obtenir ou définir le contenu d'un élément. Ce contenu exclut la propre balise de l'élément et inclut uniquement le balisage qui représente les enfants de l'élément, sous la forme d'une chaîne.

Considérez cet exemple de code :

instagram viewer 
<html>
<corps>
<pidentifiant="mon p">Je suis un paragraphe.p>


<scénario>
document.getElementById("mon p").innerHTML = "Bonjour le monde";
scénario>
corps>


html>

Dans votre navigateur, vous verrez un paragraphe standard avec le texte de remplacement, comme ceci :

La propriété innerHTML sélectionne et modifie le contenu duélément dans cet exemple.

Qu'est-ce que le HTML externe ?

La propriété outerHTML ressemble à innerHTML à bien des égards. Vous pouvez l'utiliser pour obtenir ou définir le contenu d'un élément sélectionné. Cependant, il définit également le balisage représentant l'élément lui-même. Cela inclut la balise d'ouverture, toutes les propriétés et, le cas échéant, la balise de fermeture.

Revoyez l'exemple précédent pour voir en quoi outerHTML diffère :

<html>
<corps>
<pidentifiant="mon p">Je suis un paragraphe.p>


<scénario>
document.getElementById("mon p").outerHTML = "
Ce H1 a remplacé un paragraphe.
"
scénario>
corps>
html>

Dans votre navigateur, vous devriez voir quelque chose comme ceci :

Dans cet exemple, la propriété outerHTML modifie le p élément dans un h1 élément.

Connaître la différence et quand utiliser ces propriétés

Les propriétés DOM innerHTML et outerHTML présentent de nombreuses similitudes, mais une différence essentielle. La propriété innerHTML capture le contenu HTML d'un élément. En revanche, la propriété outerHTML capture le code HTML qui représente l'élément lui-même et son contenu.

Vous pouvez utiliser ces propriétés pour lire et écrire du contenu HTML via le DOM. Le DOM sera un concept commun et important tout au long de votre processus de développement JavaScript.