Include another HTML file in a HTML file

Question

I have 2 HTML files  suppose a html and b html  In a html I want to include b html   In JSF I can do it like that    lt ui include src  b xhtml    gt    It means that inside a xhtml file  I can include b xhtml   How can we do it in   html file

User · Answer

Here s my approach using Fetch API and async function   lt div class  js-component  data-name  header  data-ext  html  gt  lt  div gt   lt div class  js-component  data-name  footer  data-ext  html  gt  lt  div gt    lt script gt      const components   document querySelectorAll   js-component        const loadComponent   async c   gt            const   name  ext     c dataset         const response   await fetch    name    ext            const html   await response text           c innerHTML   html                components  forEach loadComponent   lt  script gt

User · Answer

html5rocks com has a very good tutorial on this stuff  and this might be a little late  but I myself didn t know this existed  w3schools also has a way to do this using their new library called w3 js  The thing is  this requires the use of a web server and and HTTPRequest object  You can t actually load these locally and test them on your machine  What you can do though  is use polyfills provided on the html5rocks link at the top  or follow their tutorial  With a little JS magic  you can do something like this    var link   document createElement  link     if  import  in link          Run import code      link setAttribute  rel   import         link setAttribute  href  importPath        document getElementsByTagName  head   0  appendChild link          Create a phantom element to append the import document text to      link   document querySelector  link rel  import           var docText   document createElement  div         docText innerHTML   link import       element appendChild docText cloneNode true       else          Imports aren t supported  so call polyfill      importPolyfill importPath        This will make the link  Can change to be the wanted link element if already set   set the import  unless you already have it   and then append it  It will then from there take that and parse the file in HTML  and then append it to the desired element under a div  This can all be changed to fit your needs from the appending element to the link you are using  I hope this helped  it may irrelevant now if newer  faster ways have come out without using libraries and frameworks such as jQuery or W3 js   UPDATE  This will throw an error saying that the local import has been blocked by CORS policy  Might need access to the deep web to be able to use this because of the properties of the deep web   Meaning no practical use

User · Answer

A very old solution I did met my needs back then  but here s how to do it standards-compliant code    lt  -- if IE  gt   lt object classid  clsid 25336920-03F9-11CF-8FD0-00AA00686F13  data  some html  gt   lt p gt backup content lt  p gt   lt  object gt   lt   endif -- gt    lt  -- if  IE  gt   lt -- gt   lt object type  text html  data  some html  gt   lt p gt backup content lt  p gt   lt  object gt   lt  -- gt   lt   endif -- gt

User · Answer

Based on the answer of https   stackoverflow com a 31837264 4360308 I ve implemented this functionality with Nodejs    express   cheerio  as follows   HTML  index html    lt div class  include  data-include  componentX  data-method  append  gt  lt  div gt   lt div class  include  data-include  componentX  data-method  replace  gt  lt  div gt    JS  function includeComponents              include   each function              var file    view html component       this  data  include       html           var dataComp   fs readFileSync file           var htmlComp   dataComp toString            if    this  data  method       replace                   this  replaceWith htmlComp             else if    this  data  method       append                   this  append htmlComp                       function foo        fs readFile    view html index html   function  err  data            if  err  throw err          var html   data toString            var     cheerio load html           includeComponents                           append -  includes the content into the div  replace -  replaces the div  you could easily add more behaviours following the same design

User · Answer

PHP is a server level scripting language  It can do many things  but one popular use is to include HTML documents inside your pages  much the same as SSI  Like SSI  this is a server level technology  If you are not sure if you have PHP functionality on your website contact your hosting provider   Here is a simple PHP script you can use to include a snippet of HTML on any PHP-enabled web page   Save the HTML for the common elements of your site to separate files  For example  your navigation section might be saved as navigation html or navigation php  Use the following PHP code to include that HTML in each page    lt  php require  DOCUMENT ROOT    navigation php      gt    Use that same code on every page that you want to include the file  Make sure to change the higlighted file name to the name and path to your include file

User · Answer

Did you try a iFrame injection   It injects the iFrame in the document and deletes itself  it is supposed to be then in the HTML DOM    lt iframe src  header html  onload  this before  this contentDocument body  this contentDocument  children 0   this remove    gt  lt  iframe gt    Regards

User · Answer

Use includeHTML  smallest js-lib   150 lines  Loading HTML parts via HTML tag  pure js  Supported load  async sync  any deep recursive includes Supported protocols  http     https     file     Supported browsers  IE 9   FF  Chrome  and may be other  USAGE  1 Insert includeHTML into head section  or before body close tag  in HTML file   lt script src  quot js includeHTML js quot  gt  lt  script gt   2 Anywhere use includeHTML as HTML tag   lt div data-src  quot header html quot  gt  lt  div gt

User · Answer

My solution is similar to the one of lolo above  However  I insert the HTML code via JavaScript s document write instead of using jQuery   a html    lt html gt      lt body gt     lt h1 gt Put your HTML content before insertion of b js  lt  h1 gt                lt script src  b js  gt  lt  script gt                 lt p gt And whatever content you want afterwards  lt  p gt     lt  body gt   lt  html gt    b js   document write           lt h1 gt Add your HTML code here lt  h1 gt           lt p gt Notice however  that you have to escape LF s with a      just like          demonstrated in this code listing        lt  p gt           The reason for me against using jQuery is that jQuery js is  90kb in size  and I want to keep the amount of data to load as small as possible   In order to get the properly escaped JavaScript file without much work  you can use the following sed command   sed  s         g s       amp    g s             g  b html  gt  escapedB html   Or just use the following handy bash script published as a Gist on Github  that automates all necessary work  converting b html to b js      https   gist github com Tafkadasoh 334881e18cbb7fc2a5c033bfa03f6ee6  Credits to Greg Minshall for the improved sed command that also escapes back slashes and single quotes  which my original sed command did not consider   Alternatively for browsers that support template literals the following also works   b js   document write         lt h1 gt Add your HTML code here lt  h1 gt         lt p gt Notice  you do not have to escape LF s with a              like demonstrated in the above code listing       lt  p gt

User · Answer

I have one more solution to do this   Using Ajax in javascript   here is the explained code in Github repo https   github com dupinder staticHTML-Include  basic idea is   index html   lt  DOCTYPE html gt   lt html gt   lt head gt       lt meta charset  utf-8  gt       lt meta http-equiv  X-UA-Compatible  content  IE edge  gt       lt title gt Page Title lt  title gt       lt meta name  viewport  content  width device-width  initial-scale 1  gt       lt script src  main js  gt  lt  script gt     lt  head gt   lt body gt       lt header gt  lt  header gt        lt footer gt  lt  footer gt   lt  body gt   lt  html gt    main js  fetch    header html      then response   gt        return response text           then data   gt        document querySelector  header   innerHTML   data         fetch    footer html      then response   gt        return response text           then data   gt        document querySelector  footer   innerHTML   data

User · Answer

Here is my in-place solution    x000D   x000D        gt    x000D      const includes   document getElementsByTagName  include    x000D         forEach call includes  i   gt    x000D          let filePath   i getAttribute  src    x000D          fetch filePath  then file   gt    x000D              file text   then content   gt    x000D                  i insertAdjacentHTML  afterend   content   x000D                  i remove    x000D                  x000D              x000D          x000D        x000D   lt p gt FOO lt  p gt  x000D   x000D   lt include src  a html  gt Loading    lt  include gt  x000D   x000D   lt p gt BAR lt  p gt  x000D   x000D   lt include src  b html  gt Loading    lt  include gt  x000D   x000D   lt p gt TEE lt  p gt  x000D   x000D   x000D

User · Answer

This is what helped me  For adding a block of html code from b html to a html  this should go into the head tag of a html    lt script src  https   code jquery com jquery-1 10 2 js  gt  lt  script gt    Then in the body tag  a container is made with an unique id and a javascript block to load the b html into the container  as follows    lt div id  b-placeholder  gt    lt  div gt    lt script gt    function          b-placeholder   load  b html         lt  script gt

User · Answer

I strongly suggest AngularJS s ng-include whether your project is AngularJS or not   lt script src  quot     angular min js quot  gt  lt  script gt    lt body ng-app  quot ngApp quot  ng-controller  quot ngCtrl quot  gt        lt div ng-include  quot  another html  quot  gt  lt  div gt         lt script gt          var app   angular module  ngApp                app controller  ngCtrl   function             lt  script gt    lt  body gt   You can find CDN  or download Zip  from AngularJS and more information from W3Schools

User · Answer

Another approach using Fetch API with Promise   lt html gt    lt body gt     lt div class  root  data-content  partial html  gt     lt script gt        const root   document querySelector   root         const link   root dataset content         fetch link           then function  response              return response text                        then function  html              root innerHTML   html                 lt  script gt    lt  body gt   lt  html gt

User · Answer

Using just HTML it is not possible to include HTML file in another HTML file  But here is a very easy method to do this  Using this JS library you can easy do that  Just use this code   lt script gt  include  path to file html   document currentScript   lt  script gt

User · Answer

If you use some framework like django bootle  they often ship some template engine  Let s say you use bottle  and the default template engine is SimpleTemplate Engine  And below is the pure html file    cat footer tpl  lt hr gt   lt footer gt     lt p gt  amp copy  stackoverflow  inc 2015 lt  p gt   lt  footer gt    You can include the footer tpl in you main file  like      cat dashboard tpl  include footer   Besides that  you can also pass parameter to your dashborard tpl

User · Answer

To insert contents of the named file    lt  -- include virtual  filename htm -- gt

User · Answer

A simple server side include directive to include another file found in the same folder looks like this    lt  -- include virtual  a html  -- gt

User · Answer

Expanding lolo s answer from above  here is a little more automation if you have to include a lot of files  Use this JS code    function        var includes       data-include        each includes  function          var file    views       this  data  include       html        this  load file           And then to include something in the html   lt div data-include  quot header quot  gt  lt  div gt   lt div data-include  quot footer quot  gt  lt  div gt   Which would include the file views header html and views footer html

User · Answer

As an alternative  if you have access to the  htaccess file on your server  you can add a simple directive that will allow php to be interpreted on files ending in  html extension   RemoveHandler  html AddType application x-httpd-php  php  html   Now you can use a simple php script to include other files such as    lt  php include  b html      gt

User · Answer

In w3 js include works like this    lt body gt   lt div w3-include-HTML  h1 html  gt  lt  div gt   lt div w3-include-HTML  content html  gt  lt  div gt   lt script gt w3 includeHTML    lt  script gt   lt  body gt    For proper description look into this  https   www w3schools com howto howto html include asp

User · Answer

To get Solution working you need to include the file csi min js  which you can locate here   As per the example shown on GitHub  to use this library you must include the file csi js in your page header  then you need to add the data-include attribute with its value set to the file you want to include  on the container element   Hide   Copy Code   lt html gt     lt head gt       lt script src  csi js  gt  lt  script gt     lt  head gt     lt body gt       lt div data-include  Test html  gt  lt  div gt     lt  body gt   lt  html gt        hope it helps

User · Answer

You can do that with JavaScript s library jQuery like this   HTML    lt div class  banner  title  banner html  gt  lt  div gt    JS       banner   each function        var inc   this         get inc attr  title    function data           inc replaceWith data                 Please note that banner html should be located under the same domain your other pages are in otherwise your webpages will refuse the banner html file due to Cross-Origin Resource Sharing policies   Also  please note that if you load your content with JavaScript  Google will not be able to index it so it s not exactly a good method for SEO reasons

User · Answer

Following works if html content from some file needs to be included  For instance  the following line will include the contents of piece to include html at the location where the OBJECT definition occurs      text before     lt OBJECT data  file to include html  gt  Warning  file to include html could not be included   lt  OBJECT gt     text after      Reference  http   www w3 org TR WD-html40-970708 struct includes html h-7 7 4

User · Answer

There is no direct HTML solution for the task for now  Even  HTML Imports   which is permanently in  draft  will not do the thing  because Import    Include and some JS magic will be required anyway  I recently wrote  a VanillaJS script that is just for inclusion HTML into HTML  without any complications     Just place in your a html   lt link data-wi-src  b html    gt   lt  --     and somewhere below is ref to the script     -- gt   lt script src  wm-html-include js  gt   lt  script gt      It is open-source and may give an idea  I hope

User · Answer

Shameless plug of a library that I wrote the solve this   https   github com LexmarkWeb csi js   lt div data-include   path to include html  gt  lt  div gt    The above will take the contents of  path to include html and replace the div with it

User · Answer

Well  if all you re wanting to do is put text from a separate file into your page  tags in the text should work  too   you can do this  your text styles on the main page   test html   should still work    test html   lt html gt   lt body gt   lt p gt Start lt  p gt    lt p gt Beginning lt  p gt    lt div gt   lt script language  JavaScript  src  sample js  gt  lt  script gt   lt  div gt    lt p gt End lt  p gt    lt  body gt   lt  html gt    sample js  var data  Here is the imported text    document write data     You can always recreate the HTML tags you want yourself  after all  There s need for server-side scripting just to grab text from another file  unless you want to do something more   Anyway  what I m starting to use this for is to make it so if I update a description common among lots of HTML files  I only need to update one file to do it  the  js file  instead of every single HTML file that contains the text   So  in summary  instead of importing an  html file  a simpler solution is to import a  js file with the content of the  html file in a variable  and write the contents to the screen where you call the script    Thanks for the question

User · Answer

Here is a great article  You can implement common library and just use below code to import any HTML files in one line     lt head gt      lt link rel  import  href  warnings html  gt   lt  head gt    You can also try Google Polymer

User · Answer

In my opinion the best solution uses jQuery   a html    lt html gt      lt head gt        lt script src  jquery js  gt  lt  script gt        lt script gt         function              includedContent   load  b html                  lt  script gt      lt  head gt       lt body gt         lt div id  includedContent  gt  lt  div gt     lt  body gt    lt  html gt    b html    lt p gt This is my include file lt  p gt    This method is a simple and clean solution to my problem   The jQuery  load   documentation is here

User · Answer

I know this is a very old post  so some methods were not available back then  But here is my very simple take on it  based on Lolo s answer    It relies on the HTML5 data-  attributes and therefore is very generic in that is uses jQuery s for-each function to get every  class matching  load-html  and uses its respective  data-source  attribute to load the content    lt div class  container-fluid  gt       lt div class  load-html  id  NavigationMenu  data-source  header html  gt  lt  div gt       lt div class  load-html  id  MainBody  data-source  body html  gt  lt  div gt       lt div class  load-html  id  Footer  data-source  footer html  gt  lt  div gt   lt  div gt   lt script src  js jquery min js  gt  lt  script gt   lt script gt    function              load-html   each function                this  load this dataset source                lt  script gt

User · Answer

The Athari  s answer  the first   was too much conclusive  Very Good   But if you would like to pass the name of the page to be included as URL parameter  this post has a very nice solution to be used combined with   http   www jquerybyexample net 2012 06 get-url-parameters-using-jquery html  So it becomes something like this   Your URL    www yoursite com a html p b html   The a html code now becomes    lt html gt      lt head gt        lt script src  jquery js  gt  lt  script gt        lt script gt       function GetURLParameter sParam              var sPageURL   window location search substring 1         var sURLVariables   sPageURL split   amp           for  var i   0  i  lt  sURLVariables length  i                     var sParameterName   sURLVariables i  split               if  sParameterName 0     sParam                         return sParameterName 1                                  function          var pinc   GetURLParameter  p              includedContent   load pinc                 lt  script gt      lt  head gt       lt body gt         lt div id  includedContent  gt  lt  div gt     lt  body gt    lt  html gt    It worked very well for me  I hope have helped

User · Answer

I came to this topic looking for something similar  but a bit different from the problem posed by lolo   I wanted to construct an HTML page holding an alphabetical menu of links to other pages  and each of the other pages might or might not exist  and the order in which they were created might not be alphabetical  nor even numerical    Also  like Tafkadasoh  I did not want to bloat the web page with jQuery   After researching the problem and experimenting for several hours  here is what worked for me  with relevant remarks added   lt  DOCTYPE HTML PUBLIC  quot -  W3C  DTD HTML 4 01 Transitional  EN quot  gt   lt html gt   lt head gt     lt meta http-equiv  quot Content-Type quot  content  quot text application html  charset iso-8859-1 quot  gt     lt meta name  quot Author quot  content  quot me quot  gt     lt meta copyright  quot Copyright quot  content   quot  C  2013-present by me quot    gt     lt title gt Menu lt  title gt    lt script type  quot text javascript quot  gt   lt  -- var F000  F001  F002  F003  F004  F005  F006  F007  F008  F009      F010  F011  F012  F013  F014  F015  F016  F017  F018  F019  var dat   new Array    var form  script  write  str  tmp  dtno  indx  unde      The  quot F000 quot  and similar variables need to exist be-declared  Each one will be associated with a different menu item  so decide on how many items maximum you are likely to need  when constructing that listing of them   Here  there are 20       function initialize     window name  quot Menu quot     form   document getElementById  MENU      for indx 0  indx lt 20  indx        str    quot 00 quot    indx      tmp   str length - 3      str   str substr tmp       script   document createElement  script        script type    text javascript       script src   str    quot  js quot       form appendChild script           The for   loop constructs some  lt script gt  objects and associates each one with a different simple file name  starting with  quot 000 js quot  and  here  going up to  quot 019 js quot   It won t matter which of those files exist or not  However  for each menu item you want to display on this page  you will need to ensure that its  js file does exist   The short function below  inside HTML comment-block  is  generically  what the content of each one of the  js files looks like   lt  -- function F000     return   quot Menu Item Name quot    quot   URLofFile htm quot    quot Description string quot      -- gt    Continuing the remarks in the main menu htm file  It happens that each call of the form appendChild   function will cause the specified  js script-file to be loaded at that time  However  it takes a bit of time for the JavaScript in the file to be fully integrated into the web page  so one thing that I tried  but it didn t work  was to write an  quot onload quot  event handler  The handler was apparently being called before the just-loaded JavaScript had actually become accessible   Note that the name of the function in the  js file is the same as one of the pre-defined variables like  quot F000 quot    When I tried to access that function without declaring the variable  attempting to use an  quot onload quot  event handler  the JavaScript debugger claimed that the item was  quot not available quot    This is not something that can be tested-for  However   quot undefined quot  IS something that CAN be tested-for   Simply declaring them to exist automatically makes all of them  quot undefined quot   When the system finishes integrating a just-loaded  js script file  the appropriate variable  like  quot F000 quot   will become something other than  quot undefined quot    Thus it doesn t matter which  js files exist or not  because we can simply test all the  quot F000 quot -type variables  and ignore the ones that are  quot undefined quot    More on that later   The line below specifies a delay of 2 seconds  before any attempt is made to access the scripts that were loaded   That DOES give the system enough time to fully integrate them into the web page   If you have a really long list of menu items  or expect the page to be loaded by an old slow computer  a longer delay may be needed         window setTimeout  quot BuildMenu    quot   2000     return        So here is the function that gets called after the 2-second delay   function BuildMenu     dtno   0       index-counter for the  quot dat quot  array   for indx 0  indx lt 20  indx        str    quot 00 quot    indx      tmp   str length - 3      str    quot F quot    str substr tmp       tmp   eval str       if tmp    unde      quot unde quot  is deliberately undefined  for this test       dat dtno      eval str    quot    quot            The loop above simply tests each one of the  quot F000 quot -type variables  to see if it is  quot undefined quot  or not   Any actually-defined variable holds a short function  from the  quot  js quot  script-file as previously indicated   We call the function to get some data for one menu item  and put that data into an array named  quot dat quot    Below  the array is sorted alphabetically  the default   and the  quot dtno quot  variable lets us know exactly how many menu items we will be working with   The loop that follows creates some  quot  lt span gt  quot  tags  and the the  quot innerHTML quot  property of each one is set to become an  quot anchor quot  or  quot  lt a gt  quot  tag  for a link to some other web page   A description and a  quot  lt br   gt  quot  tag gets included for each link   Finally  each new  lt span gt  object is appended to the menu-page s  quot form quot  object  and thereby ends up being inserted into the middle of the overall text on the page   For finer control of where you want to put text in a page  consider placing something like this in the web page at an appropriate place  as preparation   lt div id  quot InsertHere quot  gt  lt  div gt  You could then use document getElementById  quot InsertHere quot   to get it into a variable  for appending of  lt span gt  elements  the way a variable named  quot form quot  was used in this example menu page   Note  You don t have to specify the link in the same way I did  the type of link specified here only works if JavaScript is enabled   You are free to use the more-standard  quot  lt a gt  quot  tag with the  quot href quot  property defined  if you wish   But whichever way you go  you need to make sure that any pages being linked actually exist        dat sort      for indx 0  indx lt dtno  indx        write   document createElement  span        write innerHTML    quot  lt a onclick   quot window open   quot    dat indx  1                           quot     Menu     quot  style   quot color  0000ff  quot                            quot text-decoration underline cursor pointer   quot  gt  quot                          dat indx  0     quot  lt  a gt   quot    dat indx  2     quot  lt br   gt  quot       form appendChild write         return        -- gt   lt  script gt   lt  head gt    lt body onload  quot initialize    quot  style  quot background-color  a0a0a0  color  000000    font-family sans-serif  font-size 11pt  quot  gt   lt h2 gt  amp nbsp   amp nbsp   amp nbsp   amp nbsp   amp nbsp   amp nbsp   amp nbsp   amp nbsp   amp nbsp   amp nbsp   amp nbsp   amp nbsp   amp nbsp MENU  lt noscript gt  lt br   gt  lt span style  quot color  ff0000  quot  gt  Links here only work if lt br   gt  your browser s JavaScript lt br   gt  support is enabled  lt  span gt  lt br   gt  lt  noscript gt  lt  h2 gt  These are the menu items you currently have available  lt br   gt   lt br   gt   lt form id  quot MENU quot  action  quot  quot  onsubmit  quot return false  quot  gt   lt  -- Yes  the  lt form gt  object starts out completely empty -- gt   lt  form gt  Click any link  and enjoy it as much as you like  lt br   gt  Then use your browser s BACK button to return to this Menu  lt br   gt  so you can click a different link for a different thing  lt br   gt   lt br   gt   lt br   gt   lt small gt This file  web page  Copyright  c  2013-present by me lt  small gt   lt  body gt   lt  html gt

User · Answer

Web Components I create following web-component similar to JSF  lt ui-include src  quot b xhtml quot  gt  lt ui-include gt   You can use it as regular html tag inside your pages  after including snippet js code   x000D   x000D  customElements define  ui-include   class extends HTMLElement     async connectedCallback         let src   this getAttribute  src        this innerHTML   await  await fetch src   text            x000D  ui-include   margin  20px      example CSS    x000D   lt ui-include src  https   cors-anywhere herokuapp com https   example com index html  gt  lt  ui-include gt    lt div gt My page data    - in this snippet styles overlaps    lt  div gt    lt ui-include src  https   cors-anywhere herokuapp com https   www w3 org index html  gt  lt  ui-include gt  x000D   x000D   x000D

User · Answer

You can use a polyfill of HTML Imports  https   www html5rocks com en tutorials webcomponents imports    or that simplified solution https   github com dsheiko html-import  For example  on the page you import HTML block like that    lt link rel  html-import  href    some-path block html   gt    The block may have imports of its own    lt link rel  html-import  href    some-other-path other-block html   gt    The importer replaces the directive with the loaded HTML pretty much like SSI  These directives will be served automatically as soon as you load this small JavaScript    lt script async src    src html-import js  gt  lt  script gt    It will process the imports when DOM is ready automatically  Besides  it exposes an API that you can use to run manually  to get logs and so on  Enjoy

User · Answer

No need for scripts  No need to do any fancy stuff server-side  tho that would probably be a better option    lt iframe src   path to file html  seamless gt  lt  iframe gt    Since old browsers don t support seamless  you should add some css to fix it   iframe seamless        border  none      Keep in mind that for browsers that don t support seamless  if you click a link in the iframe it will make the frame go to that url  not the whole window  A way to get around that is to have all links have target   parent   tho the browser support is  good enough

User · Answer

using jquery u need import library  i recommend you using php   lt  php     echo  lt html gt                lt body gt      gt    lt  php     include  b html     gt   lt  php     echo   lt  body gt            lt  html gt      gt    b html   lt div gt hi this is ur file  3 lt div gt

User · Answer

Checkout HTML5 imports via Html5rocks tutorial  and at polymer-project  For example    lt head gt     lt link rel  import  href   path to imports stuff html  gt   lt  head gt

User · Answer

Most of the solutions works but they have issue with jquery   The issue is following code   document  ready function      alert     includedContent   text       alerts nothing instead of alerting included content   I write the below code  in my solution you can access to included content in   document  ready function    The key is loading included content synchronously    index htm    lt html gt       lt head gt           lt script src  jquery js  gt  lt  script gt            lt script gt               function                         include   function  url                          ajax                           url  url                          async  false                          success  function  result                                document write result                                                                                      jQuery             lt  script gt            lt script gt                document  ready function                      alert     test   text                              lt  script gt       lt  head gt        lt body gt           lt script gt   include  include inc    lt  script gt       lt  body gt    lt  html gt    include inc    lt div id  test  gt      There is no issue between this solution and jquery   lt  div gt    jquery include plugin on github

User · Answer

Using ES6 backticks     template literals     x000D   x000D  let nick    Castor   name    Moon   nuts   1 x000D   x000D  more innerHTML     x000D   x000D   lt h1 gt Hello   nick    name   lt  h1 gt  x000D   x000D  You collected   nuts  nuts so far  x000D   x000D   lt hr gt  x000D   x000D  Double it and get   nuts   nuts  nuts   x000D   x000D     x000D   lt div id  more  gt  lt  div gt  x000D   x000D   x000D    This way we can include html without encoding quotes  include variables from the DOM  and so on   It is a powerful templating engine  we can use separate js files and use events to load the content in place  or even separate everything in chunks and call on demand   let inject   document createElement  script    inject src         com template panel45 js   more appendChild inject     https   caniuse com  feat template-literals

[javascript] Include another HTML file in a HTML file

Examples related to javascript

Examples related to html

Examples related to dom

Examples related to include