Exchange contents of a div for an html file

Question

Exchange contents of a div for an html file

Asked 6 years, 4 months ago

Viewed 681 times

2

I am making a simple portfolio that will not need any framework as angular or React, what I would like and do something so that I could create separate html files and a main just by swapping the content of the page 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>

Any other file:

<div>subtitulo da pagina</div>

Another html file

<div>outro subtitulo</div>

I want to get these files into my main html, I don’t care to import all the css and javascript directly into my main file since it will be something very light, but I would love to make this file exchange system.

You want to make a one page application this is usually done with Ajax. It would be better if you study Ajax than to ask for opinion, Voce can take a look: W3schools or MDN MDN is more recommended because it is more updated, whereas W3schools is more practical, goes straight to the point, but a little outdated.

– Alex

2018/02/21 at 13:21
I had no idea where to start, I will study Ajax and see if I can do it. Thank you.

– Erick Zanetti

2018/02/21 at 13:41
I think this might help you: https://answall.com/a/276631/99718

– Valdeir Psr

2018/02/21 at 16:08

2 answers

Browser other questions tagged javascript html css3

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

by Jorge.M • **2,818** points · Answer 1 · 2018-02-21T14:07:37+00:00

The answer that Hugo quoted above is the most semantic way to do this.

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

What is the advantage of such use?

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

Example:

We have the files index.aspx, maisVisitados.aspx and sobreNos.aspx, then we create the files that will be reused on these pages menu.asp and rodape.asp and make their call 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, it 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>

Concluding

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

by hugocsl • **65,517** points · Answer 2 · 2018-02-21T13:25:28+00:00

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

Your page that will receive these includes needs to be a .PHP, however the files you will call by include can be simple Htmls. (if you want you can use include with other extensions, it’s just not possible to include type links "/" unless you use a "URL inclusion packers")

See 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 will call in includes do not need to <!DOCTYPE html> <html> <head> or <body> you can start by <nav> <header> <section> or <div> for example. Then inside your item1.html would only need this for example:

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

OBS: To test the files .PHP vc needs to run a local server like Wamp or Xamp, because the browser cannot interpret PHP alone, it has to be on the Local Server or some FTP

Include PHP manual: http://php.net/manual/en/function.include.php