Change language
Python.Engineering Wiki Javascript Innerhtml

Javascript Innerhtml

__del__ | __main__ Python module | ast Python module | code Python module | COM PHP module | Ctype PHP module | dis Python module | DOM PHP module | Ev PHP module | Event PHP module | html Python module | http Python module | imp Python module | io Python module | JavaScript | jQuery JavaScript library | os Python module | PS PHP module | Python For dummies | Python functions | Python-Funktionen und -Methoden | re Python module | select Python module | site Python module | SPL PHP module | StackOverflow | string Python module | test Python module | time Python module | UI PHP module | uu Python module | Yaf PHP module
Michael Zippo Michael Zippo 04.11.2021

Sie mussen wissen, wie Sie den auf der Seite angezeigten Text oder HTML-Code ändern, um Ihre Websites interaktiver zu gestalten. Hier kommen die HTML-Attribute innerText und innerHTML ins Spiel.

Diese Attribute machen es einfach, den Text und den HTML-Code eines DOM-Elements zu ändern Code. In dieser Anleitung erfahren Sie, wie Sie die JavaScript-Attribute innerText und innerHTML verwenden.

Was ist JavaScript innerHTML?

Die JavaScript-Eigenschaft innerHTML legt den HTML-Inhalt eines Elements auf einer Webseite fest. InnerHTML ist eine Eigenschaft des HTML-DOM. innerHTML wird häufig verwendet, um den Inhalt eines

element.

Sie können innerHTML wie folgt verwenden:

document.getElementById("Absatz‚").innerHTML = "Karma!‚";

Diese Codezeile legt den Inhalt des "Absatzes‚"

zu ‚ÄûKarma-Karma!‚" Die Methode getElementById() ruft ein Element anhand seiner ID ab.

Der Browser definiert eine Document Object Model (DOM) beim Laden einer Seite. Dieses DOM ist eine Reihe von Objekten, die auf der Seite angezeigt werden.

Das DOM bedeutet, dass Sie den HTML-Code nicht jedes Mal ändern mussen, wenn Sie ein Webelement ändern möchten. Sie können das DOM und JavaScript verwenden, um zu ändern, wie die Seite in einer bestimmten Sitzung angezeigt wird.

Was ist JavaScript innerText?

Die JavaScript-Eigenschaft innerText legt den Textinhalt eines Elements fest. Es legt auch den Inhalt seiner Nachkommen fest. Nachkommen können Tags innerhalb eines Absatzes.

Die Syntax von innerText ähnelt der von innerHTML:

document.getElementById("element‚").innerText = "Dies ist ein Test.&rdquo ;;

Dies setzt den Textwert des Elements mit der ID "Element‚" zu "Dies ist ein Test.‚"

Sie können diese Methoden testen, indem Sie in Ihre JavaScript-Konsole gehen und ein zu änderndes Element auswählen:

Dies ändert den Inhalt des ersten

-HTML-Tags auf einer Webseite. Wenn Sie Text ersetzen möchten, können Sie das Attribut innerText verwenden:

Dies √§ndert den Inhalt des zweiten Absatzes (gekennzeichnet durch die Zahl 1) auf der Seite in "Dies ist ein Test‚".

Lassen Sie uns beginnen, indem Sie den Text ändern auf eine Webseite. Wir werden eine einfache Flashcard-Webseite erstellen. Auf dieser Webseite wird eine Frage zu HTML angezeigt. Sie hat eine Schaltfläche, die beim Anklicken die Antwort auf eine Frage zu HTML anzeigt.

Erstellen Sie eine Webseite

Unser erster Schritt besteht darin, eine index.html-Datei fur unser Frontend zu erstellen:

Diese Seite erstellt einen Container mit drei Komponenten. Zuerst haben wir die Frage, die wir dem Benutzer stellen. Wir haben die Nachricht, wie Sie die Antwort preisgeben können. Unsere Seite endet mit einer Schaltfläche, um die Antwort anzuzeigen.

Unser Code gibt den Textinhalt unserer Elemente zuruck:

6T3AqzAPinI7lFyjQvH2K5A7rt 1RCErWqdxCPfZsgbtsRnymdUu9CRkmnu6SLrXKDZ19i9pObkHLyFwA3q3CI2vsm1IfCvU3AYYkweMNHLbOYGhgByfgvd417wxRACkh08KQrYx

Wir werden uns einige CSS-Stile in einer styles.css Datei beziehen sich auf unsere Seite schönere zu machen:

Schauen wir uns nun unsere Webseite an:

Acuv0IVyLlR1c2 EiCi4KGUjIRL47I85nFJfPbVzO DFk7bGtEq0PvcutixgrZEGOCBva3hJkyy7XP83DahvKKYgPdIp0jfHD2sY3hdOSUjBjVcAhxeIgOwOH733NW6syaFhNluO

Unsere Website zeigt etwas, das mehr sieht aus wie eine Flash-Karte. Wir haben unsere Schaltfläche gestaltet.

Text mit JavaScript ändern innerHTML und innerText

Wir möchten, dass die Antwort auf die Frage beim Klicken auf die Schaltfläche angezeigt wird Wählen Sie die Text- und Schaltflächenelemente aus, die wir in unserem JavaScript-Code verwenden werden. Wir schreiben den gesamten Code in unsere Datei scripts.js:

Als Nächstes sind wirre Ich werde eine JavaScript-Funktion erstellen. Diese Funktion zeigt die Antwort auf unsere Frage, wenn auf die Schaltfläche geklickt wird:

Um unsere Funktion auf Knopfdruck zu aktivieren, erstellen wir einen einfachen Ereignis-Listener. Dieser Listener lauscht auf einen Klick auf unsere Schaltfläche:

Wir haben die Einrichtung unserer Karteikarten-App abgeschlossen. Wenn wir unsere Webseite aufrufen und auf die Schaltfl√§che "Antwort anzeigen‚" klicken, wird der Text in unserem Absatz ge√§ndert, um die Antwort anzuzeigen: