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
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

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.

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

Post

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?

History
Why does this post require attention from curators or moderators?
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)
Why Javascript?
Canina‭ wrote over 3 years ago

You say that you want a "vanilla Javascript" solution, but why? You say that you are already working with PHP; is there some particular reason why you want to use Javascript, when PHP can do what you're after server-side at minimal additional cost? Also, is the intention for the Javascript in question to run on the server side (using for example Node.js), or on the client side (causing additional requests by the browser)?

deleted user wrote over 3 years ago

Hi, thanks; I just don't know much about PHP in general and need to learn more about it. The JavaScript I meant to is client side.