[Moo] add before each hr element

[Chad Meyers]

I have the the folowing html

<p> .... </p>
<p> .... </p>
<hr />
<p> .... </p>
<hr />
<p> .... </p>
<p> .... </p>

and inside the <p>'s there are floated images, and they are messing with 
the margin set on the <hr />'s  I can fix this by adding a simple <div 
class="clear"></div> before each <hr />.

I can't seem to figure out how.  I have tried element.inject,replace,grab 
but none seem to work for me.  any help?

I thought something like this;
var clearDiv = new Element('div.clear');
$$('hr').inject(clearDiv, 'top')

Why? think WYSIWYG client input. ['what's a div?']