recherche

Maison >interface Web >tutoriel HTML >Comment modifier le texte à l'intérieur de toutes les balises HTML à l'aide de JavaScript

Comment modifier le texte à l'intérieur de toutes les balises HTML à l'aide de JavaScript

WBOY
WBOYavant
2023-08-26 13:57:141592parcourir

Comment modifier le texte à lintérieur de toutes les balises HTML à laide de JavaScript

Dans cet article, nous effectuerons la tâche de modifier le texte dans toutes les balises HTML à l'aide de JavaScript. Plongeons dans cet article pour en savoir plus sur la modification du texte dans tout le code HTML, mais commençons par définir les balises HTML.

Que sont les balises HTML

La balise HTML est un morceau de langage de balisage utilisé pour indiquer le début et la fin des éléments HTML dans un document HTML. Les balises HTML sont les éléments constitutifs des éléments HTML qui aident les navigateurs Web à convertir les documents HTML en pages Web.

Pour une meilleure compréhension, modifiez le texte à l'intérieur de toutes les balises HTML à l'aide de JavaScript. Regardons l'exemple suivant.

Exemple

Dans l'exemple ci-dessous, nous allons créer une simple page Web où nous modifierons le texte en exécutant un script. 

<!DOCTYPE html>
<html>
   <body style="text-align:center;">
      <h2>
         Click on the button to change the text
      </h2>
      <label id = "tutorial">
         Welcome to Tutorialspoint
      </label>
      <br>
      <button onclick="changetext()">
         Click Here!
      </button>
      <script>
         function changetext() {
            var x = document.getElementById("tutorial");
            if (x.innerHTML === "Welcome to Tutorialspoint") {
               x.innerHTML = "The Best E-way Learning";
            } else {
               x.innerHTML = "Welcome to Tutorialspoint";
            }
         }
      </script>
   </body>
</html>

Lorsque le script s'exécute, il génère une sortie composée de texte et d'un bouton cliqué. Si l'utilisateur clique sur le bouton, le texte changera et un autre texte apparaîtra sur la page Web.

Utilisez replaceWith()

La méthode

Element.replaceWith() remplace les objets de la liste des enfants du parent de cet élément par un ensemble d'objets Node ou String. Insère le nœud de texte équivalent pour un objet String.

Grammaire

Ce qui suit est la syntaxe de replaceWith() -

ChildNode.replaceWith(Node);

Exemple

Considérez l'exemple suivant dans lequel nous utilisons replaceWith() pour modifier le texte à l'intérieur d'un balisage. 

<!DOCTYPE html>
<html>
   <body>
      <h2 id="tutorial">
      <span class="quotation">“</span>
      Lost in the ave of you
      <span class="quotation">”</span>
      </h2>
      <script>
         const changed = document.getElementById('tutorial');
         changed.childNodes[2].replaceWith('Welcome');
      </script>
   </body>
</html>

Lorsque vous exécutez le script ci-dessus, une fenêtre de sortie apparaîtra affichant le texte de la page Web remplacé par le texte original utilisé dans le script.

Utilisez querySelector()

Lorsqu'un ou plusieurs sélecteurs sont fournis, la méthode Document querySelector() renvoie le premier élément du document qui leur correspond. Renvoie Null s'il n'y a pas de correspondance.

Grammaire

Ce qui suit est la syntaxe de querySelector()

querySelector(selectors)

Exemple

Exécutez le code suivant, nous utilisons querySelector() pour modifier le texte dans la balise HTML. 

<!DOCTYPE html>
<html>
   <body>
      <h1>Welcome</h1>
      <script>
         document.querySelector("h1").textContent = 'Tutorialspoint';
      </script>
   </body>
</html>

Lorsque les scripts sont exécutés, ils génèrent une sortie contenant le texte de la page Web remplacé par le texte original utilisé dans le balisage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment convertir une valeur booléenne en nombre en JavaScript ?Article suivant：Comment convertir une valeur booléenne en nombre en JavaScript ?

Articles Liés

Voir plus