Javascript - Import HTML from external file

Question

I have a very simple webpage (actually implemented as an iFrame in a MS Business Central (BC) page) which is displaying some address fields for input. This is implemented into the BC page using...

HTMLContainer.insertAdjacentHTML('beforeend',
  '<div class="addyaddin">' +
  '  <div class="control">' +
  '    <div class="caption">Address</div>' +
  '    <div class="value">' +
  '      <input type="text" class="addressline" id="address1" placeholder="Start typing an address.." auto-complete/>' +
  '    </div>' +
  '  </div>' +

  '  <div class="control">' +
  '    <div class="caption">City</div>' +
  '    <div class="value">' +
  '      <input type="text" id="city" auto-complete/>' +
  '    </div>' +
  '  </div>' +

  '  <div class="control">' +
  '    <div class="caption">Region</div>' +
  '    <div class="value">' +
  '      <input type="text" id="region" auto-complete/>' +
  '    </div>' +
  '  </div>' +
  '</div>');

Which works fine, however the html is multiline so it all gets a bit messy. What I'd like to have is an html file which I could simply read into a variable and then have that display. This means my code is a lot tidier and I can mess around with the html without having to string a whole lot of lines of html together in the insertAdjacementHTML statement.

Something like...

ReadHtmlFile('\myfile.html',textVariable);
HTMLContainer.insertAdjacentHTML('beforeend',textVariable);

Unfortunately JavaScript is something I'm not really familiar with so it's been a bit hit and miss up to this point. Hoping someone can guide me in the right direction

Cheers Craig

Answer 1

I'm not sure if that is what you asked for, but:

I just copied, cleaned extra spaces and changed the variables names of an answer by @Majid Laiss in this stackoverflow question, just to test it. The function works well. A new index.txt file with the following content is created and saved in my computer:

<h1>Hello World</h1>
<p>Just a paragraph</p>
<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    <li>List item 5</li>
</ul>

When the request succeed (file has been recognized), the content (HTML Elements) will be stored in the variable text, and printed to the console. Check:

var text = new_file.responseText;
console.log(text);

This way you can manipulate the content easily.

You may have to update the path, depends on your folder structure:

read_file("index.txt"); /* The path to the file */

Credit: @Majid Laiss - How to read a local text file?

The Code:

function read_file(file){
    var new_file = new XMLHttpRequest();
    new_file.open("GET", file, false);
    new_file.onreadystatechange = function () {
        if(new_file.readyState === 4){
            if(new_file.status === 200 || new_file.status == 0){
                var text = new_file.responseText;
                console.log(text);
            }
        }
    }
    new_file.send(null);
}

read_file("index.txt"); /* The path to the file */