How to include an HTML file with jQuery?

Question

I want to make my code separate so I decided to divide each div to html files. Each HTML file has some jQuery click events. I have 2 files index.html

Answer 1

You can add menu.html into the DOM of index.html with the jQuery load() method. This way the jQuery instance created in index.html would also apply to the content loaded from menu.html.

For example in index.html you can do:

$(document).ready(function() {
    $('#some-menu').load('some-local-path/menu.html');
});

Note how $('#some-menu') is just another element in index.html into which we load the contents of menu.html. It's also important to note that because of the same-origin-policy, the AJAX request performed as part of the load() method would only work with files in the same domain, protocol and port (unless you're using CORS).