JS Fetch Another HTML File But Some Divs Missing

Question

I am fetching header.html from /layout folder to index HTML. its works but some div elements are missing. I checked the incoming data. in there also missing

   console.log('import file success');
                  console.log(this.responseText);

"test2" and "test3" texts and div is not contain in fetched data.

You can see HTML files on that link https://github.com/sawacrow/examples

There is JS Codes:

Also that Jquery code is not works

$("#headerPlaceHolder").load("./layout/header.html");

 (function (w) {



    var importFileModule = function () {};
    window.defaultImage = "../assets/images/placeholder.png";

    importFileModule.constructor = importFileModule;
    importFileModule.prototype = {
      init: function () {
        var z, i, elmnt, file, xhttp;
        z = document.getElementsByTagName("*");
        for (i = 0; i < z.length; i++) {
          elmnt = z[i];
          file = elmnt.getAttribute("import-file-path");
          if (file) {
            xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
              if (this.readyState == 4) {
                if (this.status == 200) {
                  elmnt.innerHTML = this.responseText;
                  console.log('import file success');
                  console.log(this.responseText);
                }
                if (this.status == 404) {
                  elmnt.innerHTML = "Page not found.";
                }
                elmnt.removeAttribute("import-file-path");
                $importFileModule.init();
              }
            };
            xhttp.open("GET", file, true);
            xhttp.send();
            return;
          }
        }
      },
    };
    w.$importFileModule = new importFileModule();
    $importFileModule.init();
  })(window);

I tried console log fetched data and something missing still.

edit:Above problem is still continue. but I found a alternative solution as below:

Answer 1

Try

.ajax({
    url: '.layout/header.html',
    success: function(html) {
        var content = $('<div />').html(html).find('# {insert your div name} ');
        $('#headerPlaceHolder').html(content);
    }
});