Question

I want to insert the following include tag into my webpage using JavaScript. <!--#include virtual='includes/myIncludeFile.htm' -->

I have tried the following but it doesn’t work: jQuery("<!--#include virtual='includes/myIncludeFile.htm' -->").appendTo(jQuery("body"));

I have outputted jQuery("<!--#include virtual='includes/myIncludeFile.htm' -->") to the console and it thinks that it is a comment object (see screenshot).

Where am I going wrong and how can it be done?

Answer 1

The basic premise of what you’re trying to do isn’t going to work. The HTML “include tags” you’re using are also known as “server-side includes.” That is, they are processed on the server before the page is sent to the client.

By the time the JavaScript code is executing on the client, the server is already processing the response. The client-side code can’t initiate a server-side include.

One thing you can do from the client-side is use something like jQuery’s .load() function to make a request to the server and load the response into a specified element on the page. Something like this:

$('#includeDiv').load('includes/myIncludeFile.htm');

This would dynamically load all of the contents from myIncludeFile.htm into an element of id “includeDiv” on the page.