JavaScript-Text ändern

Ammar Ali 30 Januar 2023
  1. Text eines Elements mit der Eigenschaft textContent in JavaScript ändern
  2. Text eines Elements mit der Funktion createTextNode() in JavaScript ändern
JavaScript-Text ändern

In diesem Tutorial wird erläutert, wie Sie den Text eines Elements mit der Eigenschaft textContent und der Funktion createTextNode() in JavaScript ändern.

Text eines Elements mit der Eigenschaft textContent in JavaScript ändern

Wenn Sie den alten Text eines Elements durch einen neuen Text ersetzen möchten, müssen Sie dieses Element mit seiner ID oder seinem Klassennamen abrufen und dann den alten Text mit dem neuen Text mit der Eigenschaft textContent ersetzen. Wenn keine ID oder kein Klassenname angegeben ist, können Sie dem Element mit dem Attribut id oder class eine ID oder einen Klassennamen geben. Stellen Sie sicher, dass die ID oder der Klassenname eindeutig ist. Andernfalls wird jedes Element mit derselben ID ebenfalls geändert. Lassen Sie uns zum Beispiel ein Textelement mit dem Tag span erstellen und seinen Text mit der Funktion textContent in JavaScript ändern. Siehe den Code unten.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <span id="SpanID"> Old Text </span>
    <script type="text/javascript">
        document.getElementById("SpanID").textContent="New Text";
    </script>
</body>
</html>

Ausgabe:

New Text

Der JavaScript-Code wird im obigen Code in die HTML-Datei eingefügt, Sie können sie jedoch bei Bedarf trennen. Sie können auch die Bedingung angeben, unter der der Text geändert werden soll, indem Sie auf eine Schaltfläche klicken. Wenn Sie den Text nicht ersetzen möchten, sondern neuen Text mit dem alten Text anhängen möchten, können Sie die folgende Methode verwenden.

Text eines Elements mit der Funktion createTextNode() in JavaScript ändern

Wenn Sie den neuen Text mit dem alten Text anhängen möchten, müssen Sie dieses Element mit seiner ID oder seinem Klassennamen abrufen und dann mit der Funktion createTextNode() einen Knoten des neuen Textes erstellen und mit dem Befehl appendChild() Funktion können Sie den neuen Text an den alten Text anhängen. Wenn keine ID oder kein Klassenname angegeben ist, können Sie dem Element mit dem Attribut id oder class eine ID oder einen Klassennamen geben. Stellen Sie sicher, dass die ID oder der Klassenname eindeutig ist. Andernfalls wird jedes Element mit derselben ID ebenfalls geändert. Lassen Sie uns zum Beispiel ein Textelement mit dem Tag span erstellen und seinen Text mit der Funktion createTextNode() in JavaScript anhängen. Siehe den Code unten.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <span id="SpanID"> Old Text </span>
    <script type="text/javascript">
        Myspan = document.getElementById("SpanID");
        Mytxt = document.createTextNode("New text");
        Myspan.appendChild(Mytxt);
    </script>
</body>
</html>

Ausgabe:

Old Text New Text

Wie Sie in der Ausgabe sehen können, wird der neue Text mit dem alten Text verkettet.

Autor: Ammar Ali
Ammar Ali avatar Ammar Ali avatar

Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

LinkedIn Facebook

Verwandter Artikel - JavaScript Text