title: Adding Tags around h1 tags and all content in between
body: <p>I have some code which follows the order as below - </p>
  
  <pre><code>&lt;h1&gt;Title&lt;/h1&gt;
  &lt;p&gt;Text here&lt;/p&gt;
  &lt;ul&gt;&lt;li&gt;maybe a list&lt;/li&gt;&lt;/ul&gt;
  
  &lt;h1&gt;Title 1&lt;/h1&gt;
  &lt;p&gt;More text here&lt;/p&gt;
  &lt;h2&gt;maybe a h2 somewhere&lt;/h2&gt;
  </code></pre>
  
  <p>I am wondering if, with using PHP and/or jQuery, there is any way to wrap each h1 tag with a span tag and everything up until the next h1 tag (so the p, ul or h2 tag) in another span tag so I end up with something as below -</p>
  
  <pre><code>&lt;span class="header"&gt;&lt;h1&gt;Title&lt;/h1&gt;&lt;/span&gt;
  &lt;span class="content"&gt;
  &lt;p&gt;Text here&lt;/p&gt;
  &lt;ul&gt;&lt;li&gt;maybe a list&lt;/li&gt;&lt;/ul&gt;
  &lt;/span&gt;
  
  &lt;span class="header"&gt;&lt;h1&gt;Title 1&lt;/h1&gt;&lt;/span&gt;
  &lt;span class="content"&gt;
  &lt;p&gt;More text here&lt;/p&gt;
  &lt;h2&gt;maybe a h2 somewhere&lt;/h2&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>Any help would be greatly appreciated. </p>
  
  <p>EDIT - Should have added before that the whole text comes from a database as one row of data.</p>