Question

Hi please refer the following HTML code:

<div id="content">
    <p>
      <font size='2'>
        <img src="something.jpg" width="500" height="500" />
        this is the text content. this is the text content. this is the text content...
      </font>
    </p>
</div>

this is the html code which is being generated from admin section of my web application. I can’t modify it and also can’t change the structure of the above code. it is generating dynamically.

I need to wrap the text content in a html element using jquery wrap() method so that I can put some css on the text content and not on img element.

Note: The div element with id “content” is my own, I can access only this using HTML.

Please help how to do this?

Thanks

Answer 1

Here is the jQuery way

$("p > font")
  .contents()
  .filter(function() {
    return this.nodeType == 3;
  }).wrap('<span style="color:#FF0000" />');

You can Demo it here http://www.jsfiddle.net/K8WNR/