JavaScript-Ausgabe

JavaScript bietet keine eingebauten Druck- oder Anzeigefunktionen.

JavaScript-Anzeigeschema

JavaScript kann Daten auf verschiedene Weise "anzeigen":

  • Verwenden Sie window.alert() Schreiben Sie in die Warnbox
  • Verwenden Sie document.write(); Schreiben Sie in die HTML-Ausgabe
  • Verwenden Sie innerHTML Schreiben Sie in das HTML-Element
  • Verwenden Sie console.log(); Schreiben Sie in die Browser-Konsol

Verwenden Sie innerHTML

Um auf HTML-Elemente zuzugreifen, kann JavaScript verwenden document.getElementById(id) Methode.

id Das Attribut definiert das HTML-Element. Das Attribut innerHTML definiert den HTML-Inhalt:

Beispiel

<!DOCTYPE html>
<html>
<body>
<h1>Meine erste Webseite</h1>
<p>Mein erster Abschnitt</p>
<p id="demo"></p>
<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>

Probieren Sie es selbst aus

Hinweis:Ändern Sie die innerHTML-Attribut des HTML-Elements ist eine gängige Methode, um Daten in HTML anzuzeigen.

Verwenden Sie document.write()

Zum Testzweck document.write(); Es ist praktischer:

Beispiel

<!DOCTYPE html>
<html>
<body>
<h1>Meine erste Webseite</h1>
<p>Mein erster Abschnitt</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>

Probieren Sie es selbst aus

Achtung:nach dem vollständigen Laden des HTML-Dokuments document.write(); Verwenden SieLöschen Sie alle vorhandenen HTML :

Beispiel

<!DOCTYPE html>
<html>
<body>
<h1>Meine erste Webseite</h1>
<p>Mein erster Abschnitt</p>
<button onclick="document.write(5 + 6)">Probieren Sie es aus</button>
</body>
</html>

Probieren Sie es selbst aus

Hinweis:document.write(); Methoden nur zum Testen.

Verwenden Sie window.alert()

Sie können Benachrichtigungsfenster verwenden, um Daten anzuzeigen:

Beispiel

<!DOCTYPE html>
<html>
<body>
<h1>Meine erste Webseite</h1>
<p>Mein erster Abschnitt</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>

Probieren Sie es selbst aus

Verwenden Sie console.log()

Im Browser können Sie console.log(); Methoden, um Daten anzuzeigen.

Aktivieren Sie bitte die Entwicklertools des Browsers über F12 und wählen Sie im Menü "Console" aus.

Beispiel

<!DOCTYPE html>
<html>
<body>
<h1>Meine erste Webseite</h1>
<p>Mein erster Abschnitt</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>

Probieren Sie es selbst aus