So ändern Sie Text in allen HTML-Tags mithilfe von JavaScript-HTML-Tutorial-php.cn

So ändern Sie Text in allen HTML-Tags mithilfe von JavaScript

WBOY

Freigeben： 2023-08-26 13:57:14

nach vorne

1586 Leute haben es durchsucht

So ändern Sie Text in allen HTML-Tags mithilfe von JavaScript

In diesem Artikel führen wir die Aufgabe aus, den Text in allen HTML-Tags mithilfe von JavaScript zu ändern. Lassen Sie uns in diesen Artikel eintauchen, um mehr über das Ändern von Text in allen HTML-Codes zu erfahren. Zunächst definieren wir jedoch HTML-Tags.

Was sind HTML-Tags?

HTML-Tag ist eine Markup-Sprache, die verwendet wird, um den Anfang und das Ende von HTML-Elementen in einem HTML-Dokument anzuzeigen. HTML-Tags sind die Bausteine von HTML-Elementen, die Webbrowsern dabei helfen, HTML-Dokumente in Webseiten umzuwandeln.

Verwenden Sie zum besseren Verständnis JavaScript, um den Text in allen HTML-Tags zu ändern. Schauen wir uns das folgende Beispiel an.

Beispiel

Im folgenden Beispiel erstellen wir eine einfache Webseite, auf der wir den Text ändern, indem wir ein Skript ausführen.

<!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>

Nach dem Login kopieren

Wenn das Skript ausgeführt wird, generiert es eine Ausgabe bestehend aus Text und einer angeklickten Schaltfläche. Wenn der Benutzer auf die Schaltfläche klickt, ändert sich der Text und ein anderer Text wird auf der Webseite angezeigt.

Verwenden Sie replaceWith()

Die Methode

Element.replaceWith() ersetzt die Objekte in der Kinderliste des übergeordneten Elements dieses Elements durch eine Reihe von Knoten- oder Zeichenfolgenobjekten. Fügt den entsprechenden Textknoten für ein String-Objekt ein.

Grammatik

Das Folgende ist die Syntax von

replaceWith() -

ChildNode.replaceWith(Node);

Nach dem Login kopieren

Beispiel

Betrachten Sie das folgende Beispiel, in dem wir

replaceWith() verwenden, um den Text innerhalb eines Markups zu ändern.

<!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>

Nach dem Login kopieren

Wenn Sie das obige Skript ausführen, wird ein Ausgabefenster angezeigt, in dem der Text auf der Webseite durch den im Skript verwendeten Originaltext ersetzt wird.

Verwenden Sie querySelector()

Wenn ein oder mehrere Selektoren bereitgestellt werden, gibt die Document-Methode querySelector() das erste Element im Dokument zurück, das mit ihnen übereinstimmt. Gibt Null zurück, wenn es keine Übereinstimmung gibt.

Grammatik

Das Folgende ist die Syntax von

querySelector()

querySelector(selectors)

Nach dem Login kopieren

Beispiel

Führen Sie den folgenden Code aus. Wir verwenden

querySelector(), um den Text im HTML-Tag zu ändern.

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

Nach dem Login kopieren

Wenn Skripte ausgeführt werden, generieren sie eine Ausgabe, die den Text der Webseite enthält und durch den im Markup verwendeten Originaltext ersetzt wird.

Das obige ist der detaillierte Inhalt vonSo ändern Sie Text in allen HTML-Tags mithilfe von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!