Load HTML file into another HTML file

Asked

Viewed 1,037 times

3

I have a file index.html:

<body>
    <div class="application">
        <header class="header"></header>
        <main class="content"></main>
        <footer class="footer"></footer>
    </div>
    <script src="script/index.js"></script>
</body>

And I have the header, the main and the footer in separate folders. I would like to know how I can add these external files into that main file as soon as the page is loaded. I’m trying to create as pure as possible (using only HTML, CSS and JS, avoiding frameworks). But if it’s only possible with some library, I can include.

javascript html css web-application
  • 1

    Make a include with PHP https://answall.com/questions/273072/load-html-de-other-html/273090#273090 only with HTML this can give you a light https://answall.com/questions/281023/que-recurso-finding-em-html-op%C3%A7%C3%a3o-ao-include-do-php/281044#281044 and with JS vc you can save your own. html of the other folder as a . JS and on your page you make the append of this script as the html template within something like

1 answer

2

With the Jquery

html template file.

<head>
<!--Carrega a biblioteca via CDN. Se vc já carrega outra dentro do seu projeto não precisa-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(function(){
$('#header').load("nome-arquivo-header.html");
$('#body').load("nome-arquivo-body.html");
$('#footer').load("nome-arquivo-footer.html");
});

</script>

</head>

<body>

<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>

</body>
  • 1

    Man, thanks a lot, it worked here! I really appreciate it.

Browser other questions tagged javascript html css web-application

You are not signed in. Login or sign up in order to post.