Selecting a group of nodes and wrap in a <div>

Question

I'm trying to write a greasemonkey script for a rather unpleasantly structured page. I'd like to be able to show and hide different entries, but they're in the form:

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

I was hoping to be able to wrap these in <div>s, e.g.:

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

How can I do this? I was thinking of using the prev ~ siblings jQuery selector, then iterating through until I reach another matching , but then (a) I have to match the next manually, and (b) I'm not sure how then to put them inside the when that's done?

Thanks!

PS. Why did I have to use &lt; and &gt; to write <div> instead of angle braces?

UPDATE:

So far, I have:

$(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 orphaned text behind:

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

UPDATE 2: It turns out that the nextAll function is written to only 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);
};

Answer 1

:first doesn't look right to me.