Javascript - verwenden Sie andere html-Datei spezifische Daten

Question

Ich habe eine main.html-Datei, die gut funktioniert.

var elements = document.getElementsByClassName("quest")

<a class="quest">Quest 1</a> 
 
<a class="quest">Quest 2</a> 
 
<a class="quest">Quest 3</a>

aber ich es trennen möchte. Die Datei main.html enthält also noch das Javascript, aber eine andere Datei data.html enthält den HTML-Teil des Codes. Ich würde eine Option bevorzugen mit reinem Javascript (keine jQuery usw.). Vielen Dank.

Answer 1

So müssen Sie dynamisch Teil der HTML-Seite mit JavaScript (natives JavaScript) laden.

Sie können jQuery für diesen Zweck verwenden: $("#htmlContainer").load("data.html");

Oder Sie können jQuery.load mit nativer JS ersetzen (von hier https://stackoverflow.com/a/32144585/2376676):

function load(target, url) { 
    var r = new XMLHttpRequest(); 
    r.open("GET", url, true); 
    r.onreadystatechange = function() { 
    if (r.readyState != 4 || r.status != 200) return; 
    target.innerHTML = r.responseText; 
    }; 
    r.send(); 
} 

load(document.getElementById('container'), 'data.htm');