How to link another HTML file onto HTML

Question

I am trying to create an expand on click feature on my website. When the user clicks on the button, something is displayed.

I know I can use JS to make the div show up, but my HTML code is long, so I don't want to copy the entire thing there. I know I can also use the tag, but I don't want my page to refresh.

 function findPressure() {
  var ifrm = document.createElement("iframe");
  ifrm.setAttribute("src","/Users/lunapark/Documents/antoine_equation/antoine_pressure.html");
  document.body.appendChild(ifrm);
 }

  <div class="col-md-9">
    <button onClick="findPressure()">Solve for Pressure</button>
    <button onClick="findTemp()">Solve for Temperature</button>
  </div>

As you can see here, I used iframe, which I am not in favor of. Is there some way I can link the existing HTML to my main HTML and not have it refresh on a web page?

Try to use [ajax](https://www.tutorialspoint.com/ajax/what_is_ajax) — JIJOMON K.A, Jul 09 '19 at 06:21
HTML files can't be linked like JS or stylesheets. You can use AJAX to load the content from the server. — Teemu, Jul 09 '19 at 06:22
Better Create one `` Element and Change its source on each button click. - In this approach iframe will get refresh not the entire page. — Nareen Babu, Jul 09 '19 at 06:23

score 0 · Answer 1 · answered Jul 09 '19 at 06:27

0

Lots of ways of doing this - upgrade to Vue.js for example. Or jQuery load() is pretty good for this kind of thing too. https://api.jquery.com/load/

answered Jul 09 '19 at 06:27

dijipiji

3,063
1
26
21

I'd rather recommend a simple `fetch`. – connexo Jul 09 '19 at 06:31

How to link another HTML file onto HTML

1 Answers1