Insert partial HTML file from Javascript

Question

I have a HTML page with <select> element with a few options.

<div id="par_id">
<select id="sel_id" onchange="if (this.selectedIndex) insertFragmentPage()">
      <option value="1">case 1</option>
      <option value="2">case 2</option>
      <option value="3">case 3</option>
      <option value="4">case 4</option>
</select>
</div>

function insertFragmentPage() {
    var selectElement = document.getElementById("sel_id");
    var div = document.getElementById("par_id");
    var fragment1 = document.createElement("div");
    var fragment2 = document.createElement("div");
    if (selectElement.selectedIndex > 2) {
      if (selectElement.nextSibling != null) {
        div.removeChild(selectElement.nextSibling);
      }
      div.appendChild(CONTENT_OF_FRAGMENT1);
    } else {
      if (selectElement.nextSibling != null) {
        div.removeChild(selectElement.nextSibling);
      }
      div.appendChild(CONTENT_OF_FRAGMENT2);
    }
  }

CONTENT_OF_FRAGMENT1 and CONTENT_OF_FRAGMENT2 are files in the same directory named frag1.html and frag2.html containg HTML code with root element <form> .

I know I could build this <form> element directly inside the function insertFragmentPage() but this wouldbe very painful job.

How would you append the content of those files from Javascript ?

Answer 1

Well first we gonna make it using jquery,

var div = $('#par_id');
var fragment1 = "path to your file";
var fragment2 = "path to yoir file";

Then replace div.appendChild(.....) with

div.load(fragment1);

Or

div.load(fragment2);

If you wanna clear your div just use

div.html("");