Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Adam Munhall
2,704 PointsHTML "include" files?
When programming in C under UNIX, I was able to 'include' a text file by using #include <filepath/filename> and it would be copied in for me at the moment of complilation of the program. Does HTML browsers support any such method? Can the <link> element be used to paste in some markup rather than CSS? From some web searches it seems there are some 'server-side' include-ing supported, depending on the server. Does treehouse support such a thing?
The reason this is useful is the code used multiple times (ie. <head> and <header> and <footer> on multiple pages can be written and debugged once, and maintained once. Not as nice when there's multiple copies of it.
Bottom line, is there a way to include common block code without using scripting?
4 Answers
Lonnie Wibberding
18,318 PointsJavaScript, or more easily jQuery (a JavaScript library) would be your best bet. If it is just text than it can be done with the CSS Pseudo Elements ::before and ::after.
I would create a div with a class where ever you want the code like this: <div class="my-include-file"></div>
Then in jQuery target the div like this $(".my-include-file").append("CONTENT TO APPEND"). Then anywhere you have the above div, you will get your content.
Check out the jQuery.append method here: http://www.w3schools.com/jquery/html_append.asp
Chris Shaw
26,676 PointsHi Adam,
Currently the only way you can achieve something such as includes is through pre-processors like HAML but that runs at a code level so the final product is still single HTML files that are compiled from your source.
Another solution which is making huge leaps every month is Web Components which is currently gaining more support in newer browsers, see the below link for the full supported browser list.
http://caniuse.com/#feat=imports
There is however one issue and that is you need to develop on the bleeding edge so no support for IE, current versions of Firefox etc., there is however a project Google have been working on called Polymer that takes advantage of Web Components and all their glory; the best part is it supports older browsers as well and offers excellent performance on top of that for unsupported browsers.
https://www.polymer-project.org/
Hope that helps.
Logan R
22,989 PointsYou cannot not do this with HTML.
I am pretty sure you can do this with JavaScript and I know you can do it with PHP.
Adam Munhall
2,704 PointsSince the markup needs to be inserted before the browser interprets the page, I suppose it would be the browser to support such a thing. In C, a pre-processor runs before handing the code to the compiler for interpretation. Seems pretty easy to implement this in browsers, given that the html files are all there relative to each other on the client side.. I wonder why browsers don't support someting like this. They're already doing something similar to "link" in CSS code in the <head>. It would improve reliability and maintainability. So, I guess I'm going to learn scripting next :)
Adam Munhall
2,704 PointsAdam Munhall
2,704 PointsI'm still a newb with respect to javascript. I looked at .append() [there's also a .prepend()] which was close, but possibly closer is the .load() method--though I admit I still haven't been successful getting it to work. :}