Load HTML into Javascript as if Document

Question

Including javascript into an html file is easy, but is it possible to go the other way? If I have a test.html file

<html>
<head>
<script>
  function helloWorld() { console.log("Hello World!"); }
</script>
</head>
<body>
  <h1 id="test">TEST</h1>
</body>
</html>

I want to be able to include this html in javascript so that I can reference all of the DOM elements and javascript of my html file, i.e.

require("test.html");

var header = document.getElementById("test");
helloWorld();

This code obviously does not work. But I'd really like to find a way to include an html file in javascript as if it were the document object. Is this possible?

Does this answer your question? https://stackoverflow.com/questions/10585029/parse-an-html-string-with-js — isherwood, Aug 26 '21 at 18:21

score 1 · Answer 1 · answered Aug 26 '21 at 18:15

You can perform an AJAX call to test.html in your javascript code.

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       //xhttp.responseText will have all the HTML content
    }
};
xhttp.open("GET", "test.html", true);
xhttp.send();

I don't have the context on why you want to do this but I don't recommend it. If you include your script into your HTML code, that script will be able to get any HTML node in that file.

Example:

<html>
<body>
    <h1 id="test">TEST</h1>
</body>
<script>
    //document.getElementById/getElementByClassName, etc will work with any node inside this file.
</script>

This is the same code from your question, except that the script is at the bottom and will work for you to get any elements.

score 1 · Answer 2 · answered Aug 26 '21 at 18:15

With jQuery:

jQuery.get('https://example.caom/test.html', function(data) {
    alert(data);
});

With vanilla js:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.caom/test.html');
xhr.onreadystatechange = function() {
  xhr.responseText;
}
xhr.send();

score 1 · Accepted Answer · answered Aug 26 '21 at 18:28

I would do something like this.

https://codesandbox.io/s/happy-frog-pmidw?file=/src/index.js

const url = "test.html";

fetch(url)
  .then((response) => response.text())
  .then((text) => new DOMParser().parseFromString(text, "text/html"))
  .then((dom) => dom.getElementById("test"))
  .then((test) => {
    console.log(test);
    //Do something with test.
  });

score 0 · Answer 4 · answered Aug 26 '21 at 18:42

When you include a tag in your html, the browser understands that to be instructions to make a GET request to whatever at src. Prior to the introduction of esm to browsers, Javascript didn't have anything like that. Require was added into nodejs pretty early on, but it still didn't work in browsers. A lot of projects have attempted to solve the same problem in browsers, with the most successful being bundlers like webpack. They resolve the file that is being required, then include it in the same file, or in more advanced cases, add a request to go get that file to the code.

As all the other answers have indicated, this is what you need to do to get html (or really any other files) into your javascript.

Load HTML into Javascript as if Document

4 Answers4