xmlhttprequest从外部HTML加载特定的div

Question

我正在使用xhlhttprequest加载外部html文件。但是，我试图弄清楚如何仅从该html文件中加载特定的DIV。

我的外部页面是helpFile.html-它具有数十个标题<DIV>，每个标题DIV是特定的帮助部分。我想在不同的页面上加载特定部分吗？我该怎么办？例如，dashboard.html页面上是一个帮助?图标，当用户单击它时，它将仅从helpFile.html主页面中加载helpFile.html#dashboard部分-内容将被加载到自举模态。

这是我的代码，用于检索整个页面，但是我如何才能检索所需的部分。

<script>
    var request;

    function sendInfo() {

        var url = "helpFile.html";

        if (window.XMLHttpRequest) {
            request = new XMLHttpRequest();
        }     else if (window.ActiveXObject) {
            request = new ActiveXObject("Microsoft.XMLHTTP");
        }

        try {
            request.onreadystatechange = getInfo;
            request.open("GET", url, true);
            request.send();
        } catch (e) {
            alert("Unable to connect to server");
        }
    }

    function getInfo() {
        if (request.readyState == 4) {
            var val = request.responseText;
            document.getElementById('helpModal').innerHTML = val;
        }
    }
</script>

Answer 1

使用DOMParser并查找元素

if (request.readyState == 4 && request.status == 200) {
  var parser = new DOMParser();
  var doc = parser.parseFromString(request.responseText;, "text/html");
  var dashboardElement = doc.querySelector("#dashboard");
  document.getElementById('helpModal').innerHTML = dashboardElement.innerHTML;
}