Welcome to Software Development on Codidact!

Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.

Review Suggested Edit

You can't approve or reject suggested edits because you haven't yet earned the Edit Posts ability.

~~How to include HTML files in another HTML file?~~

How to include HTML files in another HTML file with vanilla Javascript?

I develop an HTML-CSS-JavaScript-PHP contact form and I have a large HTML file which is very long and very wide (lots of horizontal scrolling due to nesting) and it's hard for me personally to work with.

I want to split the HTML file to different HTML files; all called/included/imported from one central HTML file (say, index.html) to ensure modularity and to ease long run maintenance.

[According to this MDN page](https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports), HTML imports are deprecated and no alternative was mentioned in that page. I also tried to Google search *HTML import JavaScript* but I didn't find something decisive or standard.

* I don't want to use `iframe`
* I don't want to use third party tools such as Gulp or Grunt
* `v$("#DivContent").load("yourFile.html");` might be neat but I don't use jQuery at all
* `<object data="filename.html"></object>` (what about it?)
* AJAX might be a good way but AJAX codes tend to be "messy"
* [This article has some nice insights](https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports); perhaps I should use PHP

How to include HTML files with vanilla JavaScript?

html

javascript html

Communities

Review Suggested Edit