如何在没有jquery的情况下将html文件添加到html文件

Question

当在我的网站上单击一个 div 时，我希望将另一个 html 文件的内容添加到现有的 html 中。我尝试了很多方法，但找不到解决方案。我不想使用 iframe 或 object 或 jquery 或 php。

function loadhtmlfile(filename, filetype, location){
      var fileref=document.createElement('link');
      fileref.setAttribute("rel", "html");
      fileref.setAttribute("type","text/html");
      fileref.setAttribute("href", filename);
      document.getElementById("parentDiv").appendChild(fileref);
    }

loadhtmlfile("my.html", "html", "parentDiv");

这会为 html 文件添加一个链接。它不会添加 html 文件的实际内容。

根据我的阅读，听起来最好使用服务器应用程序来执行此操作。我正在使用 node.js。如果最好做这个服务器端，我该如何使用 node.js？

我还将使用 websockets，所以我怀疑这会改变答案。

Answer 1

您可以使用带有 javascript 的 XMLHttpRequest 来加载 HTML 内容：

function loadFile(file) {

    var xhr = new XMLHttpRequest();
    xhr.open('GET', file);

    xhr.addEventListener('readystatechange', function() { // load the page asynchronously
        if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { // if the file is correctly loaded

            document.getElementById('yourelement').innerHTML = xhr.responseText; 

        }

    });

    xhr.send(null); 

}