Load HTML File Contents to Div [without the use of iframes]

2019
Using fetch

<script>
fetch('page.html')
  .then(response=> response.text())
  .then(text=> document.getElementById('elementID').innerHTML = text);
</script>

<div id='elementID'> </div>

fetch needs to receive a http or https link, this means that it won't work locally.

Note: As Altimus Prime said, it is a feature for modern browsers

2021

Two possible changes to thiagola92's answer.

1. async await - if preferred

2. insertAdjacentHTML over innerText (faster)

   <script>
   async function loadHtml() {
        const response = await fetch("page.html")
        const text = await response.text()
        document.getElementById('elementID').insertAdjacentText('beforeend', text)
   }
   
   loadHtml()
   </script>
   <!-- ... -->
   <div id='elementID'> </div>
   

There was a way to achieve this in the past, but it was removed from the specification, and subsequently, from browsers as well (e.g. Chrome removed it in Chrome 70). It was called HTML imports and it originally was part of the web components specs.

Currently folks are working on a replacement for this obviously lacking platform feature, which will be called HTML modules. Here's the explainer, and here's the Chrome platform status for this feature. There is no milestone specified yet as of when this feature will land.

Chances are the syntax is going to look similar to this:

import { content } from "file.html";

Resolving the remaining issues with HTML modules I assume might take quite some time, so until then the only viable options you have is to have

• either your build stack resolve the issue for you (e.g. with webpack-raw-loader (Webpack 4), or with asset modules (Webpack 5)),
• or to rely on async fetch to get the job done (which might result in a less-than-optimal performance experience).

We already have JSON modules and CSS module scripts (which both were sorely missing features for a long time as well).