Javascript Internehtml

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

Vous devez savoir comment modifier le texte ou le code HTML qui apparaaît sur la page pour rendre vos sites plus interactifs. C’est ici que les attributs HTML innerText et innerHTML entrent en jeu.

Ces attributs permettent de modifier facilement le texte d’un élément DOM et son code HTML code-code. Dans ce guide, vous apprendrez à utiliser les attributs JavaScript innerText et innerHTML.

Qu’est-ce que JavaScript innerHTML ?

La propriété JavaScript innerHTML définit le contenu HTML d’un élément sur une page Web. InnerHTML est une propriété du DOM HTML. innerHTML est souvent utilisé pour définir et modifier le contenu d’un élément

.

Vous pouvez utiliser innerHTML comme ceci:

document.getElementById ("paragraphe"). innerHTML = " Python.Engineering ! ";

Cette ligne de code définit le contenu de l’ élément " paragraphe "

pour " Python.Engineering ! " La méthode getElementById() récupère un élément par son ID.

Le navigateur définit un Document Object Model (DOM) lorsqu’une page est chargée. Ce DOM est une série d’objets affichés sur la page.

Le DOM signifie que vous n’avez pas à modifier le code HTML à chaque fois que vous souhaitez modifier un élément Web. Vous pouvez utiliser le DOM et JavaScript pour modifier la façon dont la page apparaaît dans une session particulière.

Qu’est-ce que JavaScript innerText ?

La propriété JavaScript innerText définit le contenu textuel d’un élément. Il définit également le contenu de ses descendants. Les descendants peuvent inclure des balises dans un paragraphe.

La syntaxe de innerText est similaire à celle de innerHTML:

document.getElementById ("element"). InnerText = "Ceci est un test. & Rdquo ;;

Ceci définit la valeur de texte de l’élément avec l’identifiant " élément " à" Ceci est un test. "

Vous pouvez tester ces méthodes en accédant votre console JavaScript et en sélectionnant un élément à modifier:

Cela modifie le contenu de la première balise HTML

sur une page Web. Si vous souhaitez remplacer le texte, vous pouvez utiliser l’attribut innerText:

Ceci modifie le contenu du deuxième paragraphe (indiqué par le numéro 1) sur la page en "Ceci est un test."

Commençons par changer le texte sur une page Web. Nous allons créer une page Web simple avec des flashcards. Cette page Web affichera une question sur le HTML. Il aura un bouton qui, une fois cliqué, révélera la réponse à une question HTML.

Créer une page Web

Notre première étape consiste à créer un fichier index.html pour notre frontal: