How can I insert a div according to your class or id?
Exemplification
<div id="main"> </div>
<div id="about"> </div>
<div id="more"> </div>
They are stamped in a single file! And then with a javascript function with you insert the div on the page!
Thank you, I hope I have been clear!
You can use the load() method to load the file, in that file the divs could have the tag hidden='true'
Just after you load the file, just grab the id of the loaded div, and give show() , or remove the hidden tag from the one you chose! This is a much more alternative (I believe) method, I do not know if there is a more simplified method for this.
In my opinion, it is not necessary to use jQuery or XHR to accomplish this, since you can load the files as resources in the html header.
In this way load the files in the header of your HTML:
<script src="about.txt"></script>
<script src="main.txt"></script>
<script src="more.txt"></script>
In the body of these files declare the content as a variable:
about.txt
var about = '<div class=about> </div>';
main.txt
var main = '<div class=main> </div>';
more.txt
var more = '<div class=more> </div>';
And then when you load the page, the features you loaded in the form of text files will be available at variable level to use them, so you can manipulate them at will.
Example (after including the files):
console.log(main+about+more);
document.body.innerHTML = main+about+more;