Prototype inner wrap

Question

I have searched the documentation and tried various techniques but have't found a suitable technique to achieve the following dom manipulation:

<h3>hello</h3> 

to

<h3><a href="#">hello</a></h3>

Thanks.

Answer 1

Prototype's wrap does actually work on text nodes, but it doesn't say that clearly, nor are text nodes extended in the usual way. Also the $$ selector excludes native text nodes so you need to fetch them yourself.

var h3 = $$('h3').first(),
    text = h3.childNodes.first();
Element.wrap(text, 'a', { href: '#' });

Answer 2

To my knowledge, Prototype has no equivalent to jQuery's wrapInner(). You can, however, simulate it with innerHTML:

$$("h3").each(function(element) {
    element.replace("<h3><a href='#'>" + element.innerHTML + "</a></h3>");
});