title: JSP page with dynamic html
body: <p>I've been trying to write a website in which all navigation is handled by hiding and showing divs. It is my understanding that this method is called Single Page Interface. This has worked for simple designs in the past but my current task is starting to become very troublesome using this method. How would I go about replicating the same behavior but instead of hiding and showing divs I can just have a main container div that is then populated with the desired html from the server?</p>
  
  <p>Example:</p>
  
  <pre><code>&lt;script&gt;
      $("#button").onclick(function() {
          $("#a").show();
          $("#b").hide();
      });
  &lt;/script&gt;
  
  &lt;html&gt;
      &lt;body&gt;
          &lt;div id="a" style="display:none;"&gt;A: SOME HTML&lt;/div&gt;
          &lt;div id="b" style="display:block;"&gt;B: SOME HTML&lt;/div&gt;
          &lt;button id="button"&gt;Change to A&lt;/button&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>(note this is a very rough example of white I'm trying to do)</p>
  
  <p>But I would like the contents of a container div to change from "B" to "A" via some jsp</p>
  
  <p>Could anybody point in the correct direction?</p>
  
  <p>Further Explanation:</p>
  
  <p>Maybe I can clarify a little better. So when the user loads the page they are presented with a section that has a table of all the existing files in a database. The user can select a file from the DB list to rename or copy. If the user wishes to rename a file, for example, they would be presented with a new display (all within the same "Tab") which will have a set of fields populated for the file that they have selected and a set of empty fields in which they can specify the new file name. Currently this changing of displays is handled by showing and hiding divs, but I would like to retrieve the html that I want to display from the server and present it. Basically mimicking the hiding and showing of divs. </p>