Insert "div" html element with javascript

Question

How can I enter a div according to its class or id?

Exemplification

<div id="main"> </div>
<div id="about"> </div>
<div id="more"> </div>

They are stored in a single file! And then with a javascript function with you insert the div into the page!

Thank you very much, I hope I’ve been clear!

Answer 1

You can use the method load(), to upload the file, in this file the Divs could have the tag hidden='true'

Right after you upload the file, just take the id of the loaded div, and give a show(), or remove the tag hidden of the one you chose! This is a much more alternative method (I believe) I don’t know if there is a more simplified one for this.

Answer 2

In my opinion it is not necessary to use jQuery or XHR to do this, as you can load the files as Resources in the html header.

This way load the files into your HTML header:

<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 loading the page, the resources you uploaded as text files will be available at variable level to use them, so you can manipulate them at will.

Example (after including files):

console.log(main+about+more);
document.body.innerHTML = main+about+more;