Selecting a group of nodes and transferring to a <div>

I'm trying to write a greasemonkey script for a rather unpleasantly structured page. I would like to show and hide different entries, but they are of the form:

<a name="first"/>
<h3>First</h3>
Some text....
<!-- end -->
<a name="second"/>
<h3>Second</h3>
Some text....
<!-- end -->

      

        
        
        
      

    

I was hoping I could wrap them in <div> s, like this:

<a name="first"/>
<div name="first>
    <h3>First</h3>
    Some text....
    <!-- end -->
</div>

      

        
        
        
      

    

How can i do this? I thought about using the jQuery prev ~ siblings selector and then iterated until I reached another match, but then (a) I need to match the following manually, and (b) I'm not sure how then to put them inside when that would be done?

Thanks!

PS. Why should I use & lt; and? to write <div> instead of angle brackets?

UPDATE:

So far I have had:

$(document).ready(function(){
    var course = $("meta[name=DEPARTMENT]").attr("content").replace(/^\s+/, "");

    $("a[name^="+course+".]:first").each(function(){
        GM_log(this.name);
        var stop=false;
        $(this).nextAll().filter(function(){
            if ($(this).is("a[name^="+course+".]"))
            {
                stop=true;
            }
            return !stop;
        })
        .wrapAll(document.createElement("div"));
    });
});

      

        
        
        
      

    

However, this leaves the orphan text behind:

<a name="first"/>
<div name="first>
    <h3>First</h3>
    <!-- end -->
</div>
Some text...

      

        
        
        
      

    

UPDATE 2: It turns out the nextAll function is only written to return element nodes. I wrote a replacement:

$.fn.nextAllWithText = function() {
    var ret = [];

    $(this).each(function() {
        var cur = this.nextSibling;
        while (cur && cur != document) {
            ret.push(cur);
            cur = cur.nextSibling;
        };
    });

    return $(ret);
};