title: How to get part of html markup as a variable
body: <p>I need to extract part of html markup:  </p>
  
  <pre><code>&lt;div id='path'&gt;
    &lt;span class='spant' data-id=0&gt;HOME&lt;/span&gt;
    &lt;span class='spant' data-id=5&gt;HOME&lt;/span&gt;
    &lt;span class='spant' data-id=9&gt;HOME&lt;/span&gt;
    &lt;span class='spant' data-id=14&gt;HOME&lt;/span&gt;
    &lt;span class='spant' data-id=11&gt;HOME&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong>  </p>
  
  <pre><code>$(document).on('click', '.spant', function () {
    var a = ... // - html of all spant before clicked, including clicked one;
  });
  </code></pre>
  
  <p>For example, if third <code>spant</code> is clicked, the result should be:</p>
  
  <pre><code>&lt;span class='spant' data-id=0&gt;HOME&lt;/span&gt;
  &lt;span class='spant' data-id=5&gt;HOME&lt;/span&gt;
  &lt;span class='spant' data-id=9&gt;HOME&lt;/span&gt;
  </code></pre>
  
  <p>How can I do this ?</p>