Comment modifier le texte à l'intérieur de toutes les balises HTML à l'aide de JavaScript-tutoriel HTML-php.cn

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

WBOY

Libérer： 2023-08-26 13:57:14

avant

1531 Les gens l'ont consulté

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>

Copier après la connexion

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);

Copier après la connexion

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>

Copier après la connexion

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)

Copier après la connexion

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>

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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

Que sont les balises HTML

Exemple

Utilisez replaceWith()

Grammaire

Exemple

Utilisez querySelector()

Grammaire

Exemple