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.
Post History
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...
#3: Post edited
by
Alexei
·
2021-08-27T06:45:12Z (about 3 years ago)
added relevant tag
#2: Post edited
by
Canina
·
2021-08-20T13:03:32Z (over 3 years ago)
that the question seeks Javascript solutions is quite relevant
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?
#1: Initial revision
How to include HTML files in another HTML file?
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?