如何为单页应用程序重新排列div

Question

I'm building a single-page web app. In this one file, I want a specific div to be shown on startup. Perhaps the user will then press a button, and a new div will replace it.

Right now, I'm using js to hide one div and show another in this case. The problem is, the new div appears further down the page (as it is written in the html file after the first div).

How can I, using javascript, simply replace one div with another as the user navigates back and forth between the divs? Is this possible and recommended?

 /* JS When #firstButton is pressed, replace div #first with div #second When #secondButton is pressed, replace the div #second with div #first */ 

 #second { visibility: hidden; } 

 <div id="first"> <h1>First Page</h1> <button id="firstButton">Go to second page</button> </div> <div id="second"> <h1>Second Page</h1> <button id="secondButton">Go to first page</button> </div> 

Answer 1

Using visibility: hidden is causing your elements to still take up space, which is why your "pages" don't appear to change places.

Switch to display: none , which can be easily toggled with jQuery's .show() and .hide() like so:

 $("#firstButton").on("click", function() { $("#first").hide(); $("#second").show(); }); $("#secondButton").on("click", function() { $("#first").show(); $("#second").hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="first"> <h1>First Page</h1> <button id="firstButton">Go to second page</button> </div> <div id="second" style="display: none;"> <h1>Second Page</h1> <button id="secondButton">Go to first page</button> </div> 

Answer 2

If you don't want to use jQuery:

 document.getElementById("firstButton").addEventListener("click", () => { document.getElementById("first").style.display="none"; document.getElementById("second").style.display="block"; }, false); document.getElementById("secondButton").addEventListener("click", () => { document.getElementById("first").style.display="block"; document.getElementById("second").style.display="none"; }, false); 

 <div id="first"> <h1>First Page</h1> <button id="firstButton">Go to second page</button> </div> <div id="second" style="display:none"> <h1>Second Page</h1> <button id="secondButton">Go to first page</button> </div>