title: Use jquery to convert divs into spans
body: <p>I am trying to alter the HTML output of a widget I have no control over.  Basically the issue is that the widget outputs HTML that uses divs inside of a p which is not valid..</p>
  
  <pre><code>&lt;div class="widget_output"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;p&gt;
                  &lt;div&gt;This is a random item&lt;/div&gt;
                  &lt;div&gt;This is a random item&lt;/div&gt;
                  &lt;div&gt;This is a random item&lt;/div&gt;
                  &lt;div&gt;This is a random item&lt;/div&gt;
              &lt;/p&gt;
         &lt;/li&gt;
         &lt;li&gt;
              &lt;p&gt;
                  &lt;div&gt;This is a random item&lt;/div&gt;
                  &lt;div&gt;This is a random item&lt;/div&gt;
                  &lt;div&gt;This is a random item&lt;/div&gt;
                  &lt;div&gt;This is a random item&lt;/div&gt;
              &lt;/p&gt;
          &lt;/li&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My idea is to change the divs into spans which are inline elements, the HTML should then be valid.  I have been looking at jquery to try and select the class and then convert these divs into spans.  Can anyone point me in the right direction or a tutorial of someone achieving something similar?</p>