Wie man JavaScript zu HTML hinzufügt

Hostman Team

Technischer Redakteur

Programmiersprache JavaScript

27.01.2026

Reading time: 6 min

In diesem Artikel schauen wir uns an, wie man JavaScript in HTML einbindet. Dafür gibt es drei Möglichkeiten:

JS-Code innerhalb eines gepaarten <script>-Tags platzieren
Eine externe Datei einbinden
Code direkt innerhalb eines HTML-Tags über spezielle Attribute schreiben

Sehen wir uns jede Methode an, um ihre Vor- und Nachteile zu verstehen.

Code innerhalb eines gepaarten <script>-Tags einfügen

Der einfachste Weg, JS-Code in eine HTML-Seite einzubinden, ist die Verwendung des gepaarten <script>-Tags. Er weist den Browser an, den gesamten Inhalt als ausführbares Skript zu interpretieren und nicht als Text oder HTML-Code.

Zum Beispiel fügen wir ein Skript hinzu, das das aktuelle Datum und die Uhrzeit anzeigt:

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Date and Time</title>

</head>

<body>

<script>

let date = new Date();

alert("Now " + date);

</script>

</body>

</html>

Beim Laden der Seite erscheint eine Benachrichtigung mit dem aktuellen Datum und der Uhrzeit.

Sie können ein komplettes Programm innerhalb des <script>-Tags schreiben. Als Beispiel erstellen wir eine elektronische Uhr:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Electronic Clock</title>

<script>

function displayTime() {

let element = document.getElementById("clock"); // Find element with id="clock"

let now = new Date(); // Get current time

element.innerHTML = now.toLocaleTimeString(); // Display time

setTimeout(displayTime, 1000); // Call the function every second

}

window.onload = displayTime; // Start displaying the time after the document is loaded

</script>

</head>

<body>

<h1>Electronic Clock</h1>.

<div id="clock"></div>

</body>

</html>

Großartig! Sie haben JavaScript verwendet, um die aktuelle Uhrzeit in ein HTML-Element einzufügen, das jede Sekunde aktualisiert wird.

Die Kommentare erklären detailliert, was das Skript macht. Es findet das Element mit id="clock" im <div>-Tag unterhalb der Überschrift. Anschließend wird die aktuelle Zeit abgerufen, direkt nach dem Laden des Dokuments angezeigt und jede Sekunde aktualisiert.

Das wirkt bequem, hat aber einige Nachteile. Wenn Sie die Uhrzeit auf jeder Seite anzeigen möchten, müssen Sie den Inhalt des <script>-Tags auf jeder Seite duplizieren.

Ein weiteres Problem: Je größer das Skript wird, desto schlechter wird die Lesbarkeit. Im Beispiel gibt es nur eine Funktion. Wenn Sie jedoch 5, 10 oder 20 benötigen, ist es deutlich sinnvoller, JavaScript aus externen Dateien einzubinden.

Externe Dateien einbinden

Das <script>-Tag wird auch verwendet, um JavaScript aus externen Dateien einzubinden – mithilfe des src-Attributs, das auf die JS-Datei verweist. Dies kann Ihre eigene Datei sein oder eine externe Bibliothek.

Zum Beispiel lagern wir die Logik für die Uhr in eine separate Datei aus:

# Time.js file

function displayTime() {

let element = document.getElementById("clock"); // Find element with id="clock"

let now = new Date(); // Get current time

element.innerHTML = now.toLocaleTimeString(); // Display time

setTimeout(displayTime, 1000); // Call the function every second

}

window.onload = displayTime; // Start displaying the time after the document is loaded

Nun entfernen wir den gesamten JS-Code aus der HTML-Datei und lassen nur das <script>-Tag mit src übrig:

#File time.html

<html>

<head>

<meta charset="utf-8">

<title>Electronic Clock</title>

<script src="./time.js"></script>

</head>

<body>

<h1>Electronic Clock</h1>.

<div id="clock"></div>

</body>

</html>.

Das Ergebnis bleibt gleich – die Uhrzeit wird per JavaScript in das HTML-Element eingefügt.

Diese Methode hat mehrere Vorteile:

HTML-Dateien werden übersichtlicher
Der gesamte JS-Code kann in einer Datei gepflegt werden
Wird ein Skript auf mehreren Seiten genutzt, lädt der Browser es nur einmal und verwendet anschließend den Cache

JavaScript innerhalb von HTML-Tags

JavaScript kann auch direkt in HTML-Tags über spezielle Attribute platziert werden: onclick, onmouseover, onkeypress, onload usw.

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>JavaScript inside an HTML tag</title>

</head>

<body>

<button onclick="alert('Hi! This is how JS works too')">Click me</button>

<button onmouseover="alert('This works too')">Hover over me</button>

</body>

</html>.

Beim Klicken auf den ersten Button erscheint eine Meldung. Beim Darüberfahren mit der Maus über den zweiten ebenfalls.

Mehrere Event-Handler lassen sich so kombinieren:

<button onclick="alert('Hi! This is how JS works too')" ; onmouseover="alert('This works too')">Click me</button>

Dies gilt jedoch als schlechte Praxis. Die meisten Entwickler trennen Inhalt und Logik. Außerdem leidet die Lesbarkeit erheblich.

Wo Scripts am besten platziert werden

Technisch können <script>-Tags überall stehen – im <head> oder <body>, am Anfang oder Ende des Dokuments.

In der Praxis werden sie meist direkt vor </body> eingefügt. Dadurch lädt der sichtbare Inhalt schneller, während JavaScript im Hintergrund geladen wird.

Der Grund: Jeder <script>-Tag blockiert das Rendering der Seite, bis das Skript vollständig geladen und ausgeführt ist. Große Dateien oder Bibliotheken können die Ladezeit deutlich erhöhen – besonders bei langsamer Internetverbindung.

Platzieren Sie Scripts im <head> nur dann, wenn ohne JavaScript kein Inhalt angezeigt werden kann. Andernfalls ist es besser, sie am Ende des Dokuments einzufügen.

Programmiersprache JavaScript

27.01.2026

Reading time: 6 min