是否有一种用于将公共代码动态插入HTML页面的vanilla JavaScript技术，类似于PHP的包含功能？

Question

I have a multi-page HTML site with common code that is reused on each page (for example, navbar code, Analytics, stylesheet imports, etc).

Is there a way to dynamically insert that common code in a manner that achieves the same result as PHP's include capability, and makes the code easier to maintain?

I've seen similar questions but not all seem to speak to what I want to achieve with the site I am working with. For example:

• How to inject HTML banner code using Vanilla Javascript? - Stack Overflow

Important: Much of the code I want to insert/import will be <header> code that is necessary to properly render the pages so it will need to be inserted as the page loads.

Any suggestions? Please limit suggestions to vanilla JavaScript. I don't know JQuery at this point and want to try do this with JS.

Answer 1

There are a handful of ways to do what you want, but I think a template engine such as EJS or similar will meet your needs.

Do keep in mind though the implications of doing this client-side. Crawlers and such that don't run JavaScript won't have the benefit of seeing what's supposed to be on your page.

What you should probably be doing instead is running these JavaScript templates server-side, outputting static pages which then can be put on your web server or CDN.