title: Reload a div with dynamic content using jQuery
body: <p>The task is to reload a <code>list</code> div with all it's content.</p>
  
  <p>The content is <code>space</code> and <code>foo</code>, which are generated also with javascript.</p>
  
  <pre><code>&lt;div id="list-wrapper"&gt;
      &lt;div id="list"&gt;
          &lt;div class="space"&gt;&lt;/div&gt;
          &lt;div class="foo"&gt;&lt;/div&gt;
          &lt;div class="foo"&gt;&lt;/div&gt;
          &lt;div class="foo"&gt;&lt;/div&gt;
          &lt;div class="space"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm trying to use</p>
  
  <pre><code>$("#list-wrapper").load(document.URL + " #list");
  </code></pre>
  
  <p>but that doesn't work properly - the reloaded <code>list</code> is empty:</p>
  
  <pre><code>&lt;div id="list-wrapper"&gt;
      &lt;div id="list"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Also I tried </p>
  
  <pre><code>$("#list").load(document.URL + " #list");
  </code></pre>
  
  <p>Again, the new <code>list</code> is empty.</p>
  
  <p>What's the way to do it?</p>
  
  <p><strong>Edit</strong> To make it clear the task. Imagine we manually made some changes on webpage, by opening Chrome Dev Tools and deleted 1 of 3 <code>foo</code>'s. And after that, we want that the script will reload the <code>list</code> div, to show all 3 <code>foo</code>'s, not 2.</p>