Question

Is there a clever jQuery selector for selecting a text node like this:

<div><input type="text">one <span>two</span> three</div>

I would like to get three from the markup above and wrap it in a strong tag like this:

<div><input type="text">one <span>two</span> <strong>three</strong></div>

Answer 1

Here is how to select text nodes using jQuery:

var x = $('div') 
  .contents() 
  .filter(function() { 
    return this.nodeType == 3;
    //return this.nodeType == Node.TEXT_NODE;  this works unless using IE 7
  }); 

In your example x will then contain ‘one’ at index 0 and ‘three’ at index 1. Like Keith Rousseau said, you can’t really just grab that text, but if you know it will be last you can get it like this:

var elemThree = x[x.length-1];

You can also add the strong tag like this:

$(x[x.length-1]).wrap("<strong></strong>");

This questions describes selecting text nodes with jQuery (my first code snippet).