Question

I have something like that :

<ul>
  <li>
    ...
  </li>
  <li>
    Office
    <table>
      .......
    </table>
  </li>
</ul>

And i want to replace Office with <h3>Office</h3> so i did :

$("li:contains('Office')").replaceWith('<h3>Office</h3>');

But it’s replacing me all the <li> (so it deletes the table too…) I know it’s normal but how to replace just the text Office please ?

Answer 1

Use .contents and .eq to select just the first node.

 $("li:contains('Office')").contents().eq(0).replaceWith('<h3>Office</h3>');

Example: http://jsfiddle.net/ppqvt/