Use jquery to convert divs into spans

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..

<div class="widget_output">
    <ul>
        <li>
            <p>
                <div>This is a random item</div>
                <div>This is a random item</div>
                <div>This is a random item</div>
                <div>This is a random item</div>
            </p>
       </li>
       <li>
            <p>
                <div>This is a random item</div>
                <div>This is a random item</div>
                <div>This is a random item</div>
                <div>This is a random item</div>
            </p>
        </li>
</div>

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?