xmlhttprequest load specific div from an external HTML

Question

I am using xhlhttprequest to load an external html file. However I am trying to figure out how to load only a speicific DIV from that html file.

My external page is helpFile.html- it has dozens header <DIV>s, an each header DIV is a specific help section. On different pages, I want to be able load a specific section? How could I do this? As an example, on the dashboard.html page is a help ? icon, that when the user clicks on it, it will load just the helpFile.html#dashboard section out of the main helpFile.html page - the content would be loaded into a bootstrap modal.

Here is my code to retrieve the entire page, but how can I just retrieve the needed section.

<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

Use DOMParser and look for the element

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;
}