Exchanging contents of a div by an html file

Question

Exchanging contents of a div by an html file

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I'm doing a simple portfolio that will not need any Framework like angled or react, which I would like and do something so I could create the separate html files and a main just by swapping the page content with JavaScript. Something like that, my index.html:

<!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">
  <title>Document</title>
</head>
<body>
  <h1>titulo principal que vai estar em todas as paginas</h1>
  <div>
    div onde quero ficar alterando meus arquivos
  </div>
</body>
</html>

Another file:

<div>subtitulo da pagina</div>

Another html file

<div>outro subtitulo</div>

I want to get these files to be placed inside my main html, I do not worry about importing all the css and javascript directly into my main file since it's going to be something very light, but I'd really like to make this system exchange files.

javascript html css3

asked by anonymous 21.02.2018 / 14:18

2 answers

Update with ajax in laravel Button does not point to another page

score 1 · Answer 1

The answer Hugo quoted above is the most semantic way of doing this.

Just for the sake of knowledge, a brief explanation: For example, in C# we use  to include different parts of files in our application.

What is the benefit of this use?

Suppose we have an application with several different pages, normally what will change on these pages will be only content, components like menu and rodapé will hardly change. Instead of creating these components on all pages, we can create separate files for each of them, and in the end call those files in your document.

Example:

We have the files index.aspx , maisVisitados.aspx and sobreNos.aspx , so we create the files that will be reused in these pages menu.asp and rodape.asp and call them in each of these files: <div>  </div> //aqui vai o menu and <div>  </div> //aqui vai o rodapé .

At the end, the page index.aspx for example, will look like this:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
</head>
<body>
  <div> <!--#include file="menu.asp" --> </div> 
  <main> 
    conteúdo principal do site
  </main>
  <div> <!--#include file="rodape.asp" --> </div>
</body>
</html>

Completing

In the background, to get the final page ( index.aspx ), we have to join several other files to reach the final result, just think of the structure of your page as if it were pieces of lego.

score 0 · Answer 2

You can do this with PHP using <?php include 'seuarquivo.html';?>

Your page that will receive these includes must be .PHP , however the files that you will call include can be simple HTMLs. (if you want you can use include with other extensions, you can not only include links like " link " be that you use a " URL inclusion packers ")

See the example:

<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">
  <title>Document</title>
</head>
<body>
  <h1>titulo principal que vai estar em todas as paginas</h1>
  <div>
    <?php include 'item1.html';?> <!-- seu conteúdo externo -->
  </div>
  <div>
    <?php include 'item2.html';?> <!-- seu conteúdo externo -->
  </div>
</body>
</html>

The .HTML files you are going to call in includes does not require <!DOCTYPE html> co_de <html> or <head> You can start straight from <body> co_de <nav> or <header> for example. So within your <section> you would only need this for example:

<div>
  <h2>titulo do item1</h2>
  <p>Conteúdo do item1 por exemplo</p>
</div>

To test the files <div> you need to run a local server type Wamp or Xamp, because the browser can not interpret PHP alone, it has to be in Local Server or in some FTP.

Include PHP Manual: link