jQuery select and wrap textNode

Pinkie picture Pinkie · Mar 13, 2011 · Viewed 9.1k times · Source

I want to select the text inside the div element and wrap it with a <b> tag. The <b> tag should only wrap to text inside div and not text inside a child element such as the <p> tag in this example.

<div>Testing
    <p>Some more text inside p</p>
    <p>asdasdasdasdasde p</p>
    Test
</div>

I'm able to select the <p> text using the following, but I'm not able to do the same for div. I only want the text of div and not p. For this case it should select and wrap Testing and Test.

var x = $('p')[0].textContent; // this is not working for div.
console.log(x);

JSFiddle

Answer

Kobi picture Kobi · Mar 13, 2011

You can use contents, and filter by node type (3 is for text node):

$('div').contents()
        .filter(function(){return this.nodeType === 3})
        .wrap('<b />');

Example: http://jsfiddle.net/nJqKq/8

See also: Node Types, at MDC