wrap element around span text

Question

I have a span which is filled dynamically. The markup then is

<span class="child">
  John Doe <br>
  johndoe@gmail.com<br>  
  0123456789<br>
</span>

what I intend to do is wrap another span around the text before the first <br> . It should then be like

<span class="child">
  <span class="firstrow">John Doe</span><br>
  johndoe@gmail.com<br>  
  0123456789<br>
</span>

How can I detect all text before the first <br> and wrap another span with class around it.

Answer 1

Using jQuery, you can use the contents() , first() , and wrap() methods:

$('.child').contents().first().wrap('<span class="firstrow"></span>'); 

• http://api.jquery.com/contents/
• http://api.jquery.com/first/
• http://api.jquery.com/wrap/

A caveat I see with this approach is, I'm using a class selector, not an ID selector, so this code could muck with multiple DOM elements in a page (but that could be what you want also, so it depends on your context).

Answer 2

You can use jQuery's .contents method:

// Find what we want to transform
var span = $("span.child");

// The first node in the span's contents would be 
// the text up to the first non-text node, i.e. up to the first <br/>
var firstNode = span.contents().first();

// Wrap it with a span with the class we want
firstNode.wrap("<span.firstrow></span>");

Also see the example in jQuery's documentation, which does something quite similar.