Replace text inside td using jQuery containing 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 only text 8: Tap on APN and Enter <B>www</B>.
no effect on hidden fields

I'm trying jQuery but can't find a 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 task, and most operations are done to skip them altogether.

Instead of cautiously avoiding the wrong nodes, why not just wrap everything you need to replace inside a <span> , for example:

 <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

Remove the text box and replace the <b> with what you need without touching the inputs:

 $('#demoTable').find('tr > td').contents().filter(function() { return this.nodeType===3; }).remove().end().end() .find('b').replaceWith($('<span />', {text: 'Hello Kitty'})); 

Fiddle

Answer 3

 $('#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/

Answer 4

What about:

 function changeText() { $("#demoTable td").each(function () { $(this).html().replace("8: Tap on APN and Enter <B>www</B>", ""); } } 

Answer 5

Wrap your content for removal in ptag, then you can do something like this:

 $(function(){ $("td").click(function(){ console.log($("td").find("p")); $("td").find("p").remove(); }); }); 

FIDDLE DEMO: http://jsfiddle.net/y3p2F/

Answer 6

It's a bit late for the party, but jQuery has to change the inner text but save the html has at least one approach not mentioned here :

 var $td = $("#demoTable td"); $td.html($td.html().replace('Tap on APN and Enter', 'new text')); 

Without correcting the text, you can use (snother) [ / questions / 114022 / jquery-change-inner-text-but-preserve-html / 706885 # 706885 :

 var $a = $('#demoTable td'); var inner = ''; $a.children.html().each(function() { inner = inner + this.outerHTML; }); $a.html('New text' + inner);