3

Eu tenho um arquivo 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>

E tenho o header, o main e o footer em pastas separadas. Gostaria de saber como posso adicionar esses arquivos externos dentro desse arquivo principal, assim que a página for carregada. Estou tentando criar de forma mais pura possível (usando somente HTML, CSS e JS, evitando frameworks). Mas se só for possível com alguma biblioteca, eu posso incluir.

1

1 Resposta 1

2

Com o Jquery

Arquivo template.html

<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
  • 1
    Cara, valeu mesmo, funcionou aqui! Agradeço de verdade.
    – Diego Rosa
    Commented 23/10/2019 às 12:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .