Wenn die HTML-Datei lokal geöffnet werden soll, sich also nicht auf einem Webserver befindet, ist das Auslesen von Dateien im Dateisystem in den meisten Fällen nicht möglich, da der Browser diese Aktion aus Sicherheitsgründen blockiert.

Wenn man beispielsweise mit XAMPP einen lokalen Webserver eingerichtet hat, gibt es drei Methoden, um den Inhalt von Dateien auszulesen:

jQuery AJAX (Asynchronous JavaScript and XML):

$.get("pfad/zur/textdatei.txt", function(data) {
    $("#text").text(data);
});

In diesem Beispiel dient die Funktion $.get() dazu, Daten von einem Server mittels eines HTTP-GET-Requests zu laden. Dabei wird im ersten Parameter der Pfad oder die URL zur Datei angegeben. Im zweiten Parameter wird eine Funktion eingesetzt, die ausgeführt wird, sobald der Dateiinhalt geladen wurde. Schließlich wird der Textinhalt, der in der Variable data gespeichert ist, in das HTML-Element #text geladen.

Hierzu muss allerdings noch die jQuery-Bibliothek geladen werden:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

Die Datei kannst Du auch herunterladen und lokal auf dem Webserver hinterlegen.

Fetch-API

fetch("pfad/zur/textdatei.txt")
    .then(response => {
        // Dateiinhalt im Textformat zurückgeben
        return response.text();
    })
    .then(data => {
        document.getElementById("text").textContent = data;
    });

Alternativ zu den AJAX-Funktionen der jQuery-Bibliothek kann man die sogenannte Fetch-API verwenden, die von allen modernen Webbrowsern unterstützt wird.

Hier wird mithilfe der fetch()-Funktion die angebene Datei geladen. Wenn die Datei geladen wurde, wird die Funktion im ersten then() ausgeführt, in der der Textinhalt der Datei zurückgegeben und damit das nachfolgende then() ausgeführt wird. Der in der Variable data gespeicherte Text wird nun in das HTML-Element #text hingeladen.

Die jQuery-Bibliothek braucht man nicht zu importieren, um die Fetch-API zu verwenden.

Den Code zur Fehlerbehebung habe ich der Einfachheit halber ausnahmsweise ausgelassen.

XMLHttpRequests

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if(this.readyState == 4 && this.status == 200) {
       document.getElementById("text").innerHTML = xhr.responseText;
    }
};
xhr.open("GET", "pfad/zur/textdatei.txt", true);
xhr.send();

In manchen älteren Browsern (z. B. Internet Explorer) wird die Fetch-API nicht unterstützt (siehe dazu Fetch | Can I use…). In diesem Falle kann man auf sogenannte XMLHttpRequests zurückgreifen, wenn man die AJAX-Funktionen der jQuery-Bibliothek nicht verwenden möchte.

In diesem Code wird zuerst ein XMLHttpRequest-Objekt erstellt. Sobald sich der Ladestatus ändert, wird onreadystatechange ausgeführt: Die if-Bedingung this.readyState == 4 && this.status == 200 überprüft, ob die Datei erfolgreich geladen wurde, womit der Dateiinhalt unter xhr.responseText in das HTML-Element mit der ID text geladen wird. Bei xhr.open() werden die HTTP-Methode (GET) und der Dateipfad angegeben; der Wert true im 3. Parameter dient der asynchronen Ausführung. xhr.send() sendet die Serveranfrage ab.

Auch hier habe ich den Code zur Fehlerbehebung der Einfachheit halber weggelassen.