title: JavaScript: Dynamically injecting and removing html pages
body: <p>I'm developing a Phonegap/Cordova application and having serious performance issues. I'm looking into a tutorial and the author is recommending dynamic creation of html pages using JavaScript. </p>
  
  <p>here's a link of the tutorial:
  <a href="http://coenraets.org/blog/phonegap-tutorial/" rel="nofollow">http://coenraets.org/blog/phonegap-tutorial/</a></p>
  
  <p>scrolling down to part 4:
  "A single page application is a web application that lives within a single HTML page. The 'views' of the application are <strong>injected into- and removed from the DOM as needed as the user navigates through the app.</strong>"</p>
  
  <p>I understand the creation part, but how are the pages being <strong>removed</strong> from the DOM???</p>
  
  <p>Code by Christopher Coenraets:</p>
  
  <pre><code>renderHomeView: function() {
    var html =
          "&lt;div class='header'&gt;&lt;h1&gt;Home&lt;/h1&gt;&lt;/div&gt;" +
          "&lt;div class='search-view'&gt;" +
          "&lt;input class='search-key'/&gt;" +
          "&lt;ul class='employee-list'&gt;&lt;/ul&gt;" +
          "&lt;/div&gt;"
    $('body').html(html);
    $('.search-key').on('keyup', $.proxy(this.findByName, this));
  },
  </code></pre>
  
  <p>The initialize function:</p>
  
  <pre><code>initialize: function() {
    var self = this;
    this.store = new MemoryStore(function() {
       self.renderHomeView();
    });
  }
  </code></pre>
  
  <p>I don't see any function that removes the HomeView after rendering it.</p>
  
  <p>please help me figure this out as I've been going over it for days</p>