Use append to add block of code to different html files

[Gilbert1391]

I am wondering if I can use append to add a template literal (a block of code) to different html files. E.g., let’s say I have a couple of html files ( about.html, projects.html, contact.html) and they all share the same <header>...code here...</header> and <footer>...code here..</footer>, instead of manually adding these block of codes in each one of the html files, can I do this with JS somehow ?

[ace1122sp]

Without more details, I can only say, yes you can.
Check out mozilla for developers for more details.

[Gilbert1391]

@ace1122sp

Without more details, I can only say, yes you can.

I edited my post, basically I have a block of code in the header and footer section that I would like to add to different html files, and I was wondering if I can do this with JS instead of manually adding these block of codes in each of the html files.

[ace1122sp]

yes, you can do that with vanilla js or you can use some library, like ejs … it is perfect for what you are trying to do…
http://ejs.co/

[Gilbert1391]

@camperextraordinaire

You can only use this code if the files are serve by a webserver and not just your local pc, because you will received a cross-origin error otherwise.

I can’t do this on my local-host? I can’t use this trick for me development work then.

[Gilbert1391]

Yes I am. Perfect then! thanks again @camperextraordinaire

[Gilbert1391]

@camperextraordinaire

$(function(){
$(“#header”).load(“header.html”);
$(“#footer”).load(“footer.html”);
});

One more question, would this be consider a good practice or would you say it’s better to insert the code in the html files? I just think having a general controller like your example is better for maintainability.

[Gilbert1391]

That’s what I thought, thanks for your help.