Search code examples
javascriptphphtmlincludedoctype

HTML equivalent of PHP include for JavaScript parts


I'm looking for a Javascript equivalent of a technique I've been using in PHP. That is, to place even the most basic page setup:

<!DOCTYPE html>
    <html lang="en">
        <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">

...in a php file like 'doc_start.php' and then start every page in my site with...

<?php require_once('/path/to/doc_start.php); ?>

Now I need to begin a project that's strictly HTML and JS (no PHP) and want a similar way to avoid duplicating basic, common HTML elements. Obviously, I want to do more than this very basic stuff, like import JQuery in every page, link to a common stylesheet, etc. Again, all easy in PHP, but I'm still kind of a newbie in JS.

I've read about HTML5 includes, but can't seem to find anything that addresses what I want to do


Solution

  • In order to import other pages into your current document, you need to use a link tag.

    For example....

    <head>
      <link rel="import" href="/path/to/imports/stuff.html">
    </head>
    

    This will allow you to reference other html, css or javascript documents into your page without copying and pasting the same code within each page.

    https://www.w3schools.com/html/html_links.asp