Return to Answer

The question asks about using only HTML and JavaScript. The problem is that a second request to the server using JavaScript or even jQuery (requesting the extra header.html "later") is:

Slow!

So, this is unacceptable in a production environment. The way to go is to include only one .js file and serve your HTML template using only this .js file. So, step 1, in your HTML you can have:

<header id="app-header"></header>
<script async src="header.js"></script>  

And then, step 2, put your template in your header.js. Use backticks for this HTML string:

let appHeader = `
    <nav>
       /*navigation or other html content here*/
    </nav>
`;
document.getElementById("app-header").innerHTML = appHeader;

This has also the benefit, that you can change the content of your template dynamically if you need, because it is JavaScript! Also, try defer (or even nothing) insted of async, but it may seem slower to the user - this depends on your other content, so just try. In those cases, don't forget to put the script after the header.

Explanation about speed

In the HTTP/2 world, the web server "undestands" what additional files (.css, .js, etc) should be sent along with a specific .html, and sends them altogether in the initial response. But, if in your "original" .html you do not have this header.html file imported (because you intend to call it later with a script), it won't be sent initially. So, when your JavaScript/jQuery requests it (this will happen much later, when HTML and your JavaScript will get "interpreted"), your browser will send a second request to the server, wait for the answer, and then do its stuff... That's why this is slow. You can validate this, using any browser's developer tools, watching the header.html coming much later.

So, as a general advice (there are a lot of exceptions of course), import all your additional files in your original .html (or php) file if you care about speed. Use defer or async if needed. Do not import any files later using JavaScript.

The question asks about using only HTML and JavaScript. The problem is that a second request to the server using JavaScript or even jQuery (requesting the extra header.html "later") is:

Slow!

So, this is unacceptable in a production environment. The way to go is to include only one .js file and serve your HTML template using only this .js file. So, step 1, in your HTML you can have:

<header id="app-header"></header>
<script async src="header.js"></script>  

And then, step 2, put your template in your header.js. Use backticks for this HTML string:

let appHeader = `
    <nav>
       /*navigation or other html content here*/
    </nav>
`;
document.getElementById("app-header").innerHTML = appHeader;

This has also the benefit, that you can change the content of your template dynamically if you need, because it is JavaScript! Also, try defer (or even nothing) insted of async, but it may seem slower to the user - this depends on your other content, so just try. Just, don't forget to put the script after the header.

Explanation about speed

In the HTTP/2 world, the web server "undestands" what additional files (.css, .js, etc) should be sent along with a specific .html, and sends them altogether in the initial response. But, if in your "original" .html you do not have this header.html file imported (because you intend to call it later with a script), it won't be sent initially. So, when your JavaScript/jQuery requests it (this will happen much later, when HTML and your JavaScript will get "interpreted"), your browser will send a second request to the server, wait for the answer, and then do its stuff... That's why this is slow. You can validate this, using any browser's developer tools, watching the header.html coming much later.

So, as a general advice (there are a lot of exceptions of course), import all your additional files in your original .html (or php) file if you care about speed. Use defer or async if needed. Do not import any files later using JavaScript.

The question asks about using only HTML and JavaScript. The problem is that a second request to the server using JavaScript or even jQuery (requesting the extra header.html "later") is:

Slow!

So, this is unacceptable in a production environment. The way to go is to include only one .js file and serve your HTML template using only this .js file. So, in your HTML you can have:

<script defer src="header.js"></script>
<header id="app-header"></header>

And then, in your header.js put your template. Use backticks for this HTML string:

let appHeader = `
    <nav>
       /*navigation or other html content here*/
    </nav>
`;
document.getElementById("app-header").innerHTML = appHeader;

This has also the benefit, that you can change the content of your template dynamically if you need! (If you want your code clean, my recommendation is not to include any other code in this header.js file.)

Explanation about speed

In the HTTP/2 world, the web server "undestands" what additional files (.css, .js, etc) should be sent along with a specific .html, and sends them altogether in the initial response. But, if in your "original" .html you do not have this header.html file imported (because you intend to call it later with a script), it won't be sent initially. So, when your JavaScript/jQuery requests it (this will happen much later, when HTML and your JavaScript will get "interpreted"), your browser will send a second request to the server, wait for the answer, and then do its stuff... That's why this is slow. You can validate this, using any browser's developer tools, watching the header.html coming much later.

So, as a general advice (there are a lot of exceptions of course), import all your additional files in your original .html (or php) file if you care about speed. Use defer if needed. Do not import any files later using JavaScript.

The question asks about using only HTML and JavaScript. The problem is that a second request to the server using JavaScript or even jQuery (requesting the extra header.html "later") is:

Slow!

So, this is unacceptable in a production environment. The way to go is to include only one .js file and serve your HTML template using only this .js file. So, step 1, in your HTML you can have:

<header id="app-header"></header>
<script async src="header.js"></script>  

And then, step 2, put your template in your header.js. Use backticks for this HTML string:

let appHeader = `
    <nav>
       /*navigation or other html content here*/
    </nav>
`;
document.getElementById("app-header").innerHTML = appHeader;

This has also the benefit, that you can change the content of your template dynamically if you need, because it is JavaScript! Also, try defer (or even nothing) insted of async, but it may seem slower to the user - this depends on your other content, so just try. In those cases, don't forget to put the script after the header.

Explanation about speed

In the HTTP/2 world, the web server "undestands" what additional files (.css, .js, etc) should be sent along with a specific .html, and sends them altogether in the initial response. But, if in your "original" .html you do not have this header.html file imported (because you intend to call it later with a script), it won't be sent initially. So, when your JavaScript/jQuery requests it (this will happen much later, when HTML and your JavaScript will get "interpreted"), your browser will send a second request to the server, wait for the answer, and then do its stuff... That's why this is slow. You can validate this, using any browser's developer tools, watching the header.html coming much later.

So, as a general advice (there are a lot of exceptions of course), import all your additional files in your original .html (or php) file if you care about speed. Use defer or async if needed. Do not import any files later using JavaScript.

The question asks about using only HTML and JavaScript. The problem is that a second request to the server by your JavaScript (requesting the header.html "later") is:

Slow!

So, this is unacceptable in a production environment. The way to go is to import only one .js file and serve your HTML template using only this .js file. So, in your HTML you can have:

<script defer src="header.js"></script>
<header id="app-header"></header>

And then, in your header.js put your template. Use backticks for this HTML string:

let appHeader = `
    <nav>
       /*navigation or other html content here*/
    </nav>
`;
document.getElementById("app-header").innerHTML = appHeader;

This has also the benefit, that you can change the content of your template dynamically if you need! (If you want your code clean, my recommendation is not to include any other code in this header.js file.)

Explanation about speed

In the HTTP/2 world, the web server "undestands" what additional files (.css, .js, etc) should be sent along with a specific .html, and sends them altogether in the initial response. But, if in your "original" .html you do not have this header.html file imported (because you intend to call it later with a script), it won't be sent initially. So, when your JavaScript/jQuery requests it (this will happen much later, when HTML and your JavaScript will get "interpreted"), your browser will send a second request to the server, wait for the answer, and then do its stuff... That's why this is slow. You can validate this, using any browser's developer tools, watching the header.html coming much later.

So, as a general advice (there are a lot of exceptions of course), import all your additional files in your original .html (or php) file if you care about speed. Use defer if needed. Do not import any files later using JavaScript.

The question asks about using only HTML and JavaScript. The problem is that a second request to the server using JavaScript or even jQuery (requesting the extra header.html "later") is:

Slow!

So, this is unacceptable in a production environment. The way to go is to include only one .js file and serve your HTML template using only this .js file. So, in your HTML you can have:

<script defer src="header.js"></script>
<header id="app-header"></header>

And then, in your header.js put your template. Use backticks for this HTML string:

let appHeader = `
    <nav>
       /*navigation or other html content here*/
    </nav>
`;
document.getElementById("app-header").innerHTML = appHeader;

This has also the benefit, that you can change the content of your template dynamically if you need! (If you want your code clean, my recommendation is not to include any other code in this header.js file.)

Explanation about speed

In the HTTP/2 world, the web server "undestands" what additional files (.css, .js, etc) should be sent along with a specific .html, and sends them altogether in the initial response. But, if in your "original" .html you do not have this header.html file imported (because you intend to call it later with a script), it won't be sent initially. So, when your JavaScript/jQuery requests it (this will happen much later, when HTML and your JavaScript will get "interpreted"), your browser will send a second request to the server, wait for the answer, and then do its stuff... That's why this is slow. You can validate this, using any browser's developer tools, watching the header.html coming much later.

So, as a general advice (there are a lot of exceptions of course), import all your additional files in your original .html (or php) file if you care about speed. Use defer if needed. Do not import any files later using JavaScript.