Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs

Dashboard
Notifications
Mark all as read
Q&A

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

+2
−1

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, 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; perhaps I should use PHP

How to include HTML files with vanilla JavaScript?

Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

2 comment threads

Why Javascript? (2 comments)
Server Side Includes ([SSI](https://en.wikipedia.org/wiki/Server_Side_Includes))? but you need to co... (1 comment)

0 answers

Sign up to answer this question »