Load static HTML file and split into array by class
<p>I have been working on this for days and I get close but not all the way.  Most of the SO answers I have found, help me get the file contents loaded into a div or a variable but it doesn't let me then do querySelectorAll on it.  So, what I need to do is load the file and then break it up into an array based on a class.  Without further ado, the code:</p>

<p>content.txt:</p>

<pre><code>&lt;h3 class="chapter"&gt;Chapter 1&lt;/h3&gt;
&lt;p&gt;Lorem&lt;/p&gt;
&lt;h3 class="chapter"&gt;Chapter 2&lt;/h3&gt;
&lt;p&gt;Lorem&lt;/p&gt;
</code></pre>

<p>Loading JS:</p>

<pre><code>$.ajax({
      url: "content/content.txt",
      cache: false,
      crossDomain: true,
      success: function(html){          
        var div = document.createElement("div");
        div.innerHTML = html;
        var chapters = div.querySelectorAll('chapter');
        alert(chapters.length);

      }
    }); 
</code></pre>

<p>Expected Result:</p>

<pre><code>['&lt;h3 class="chapter"&gt;Chapter 1&lt;/h3&gt;&lt;p&gt;Lorem&lt;/p&gt;',
  '&lt;h3 class="chapter"&gt;Chapter 2&lt;/h3&gt;&lt;p&gt;Lorem&lt;/p&gt;']
</code></pre>

<p>So this loads the file (confirmed) and I have the html in a variable.  I try loading it into a dynamic DIV in the DOM to do a <code>querySelectorAll</code> but all it returns is {}.  If I dump the <code>innerHTML</code> all of my content is there.  </p>

<p>I know I am mixing vanilla JS with jQuery, but I am unsure of the proper jQuery way to go about this.  Any thoughts?</p>