xmlhttprequest从外部HTML加载特定的div

Question

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

我的外部页面是helpFile.html-它有几十个标题<DIV>s，每个标题DIV是一个特定的帮助部分。在不同的页面上，我希望能够加载特定的部分？我怎么能这样做呢？例如，在dashboard.html页面上有一个help ?图标，当用户单击它时，它将只从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;
}