Replace text inside td using jQuery having td containing other elements

Question

My table is as follows:

<table id='demoTable'>    <tr>        <td>8: Tap on APN and Enter <B>www</B>.            <INPUT id=h150000000000000109743 class=hid value="test value" type=hidden>            <INPUT id=h250000000000000109743 class=hid1 value="26,222,98,10,50000000000000109744,T,~25,221,99,10,,T,www" type="hidden">        </td>    </tr> </table> 

I want to change the text only 8: Tap on APN and Enter <B>www</B>.
without affecting the hidden fields

I am trying jQuery but not finding the solution

function changeText() {     $("#demoTable td").each(function () {         for (var i = 0; i < $(this).children.length; i++) {             alert($(this).children(i).val());         }         // alert($(this).html());         // $(this).text("hello");         // alert($(this).html());     }); } 

Answer 1

Using text nodes in jquery is a particularly delicate endeavour and most operations are made to skip them altogether.

Instead of going through the trouble of carefully avoiding the wrong nodes, why not just wrap whatever you need to replace inside a <span> for instance:

<td><span class="replaceme">8: Tap on APN and Enter <B>www</B>.</span></td> 

Then:

$('.replaceme').html('Whatever <b>HTML</b> you want here.'); 

Answer 2

$('#demoTable td').contents().each(function() {     if (this.nodeType === 3) {         this.textContent         ? this.textContent = 'The text has been '         : this.innerText  = 'The text has been '     } else {         this.innerHTML = 'changed';         return false;     } }) 

http://jsfiddle.net/YSAjU/