如何定位<td>中文字并修改，但不影响<td>中原有元素？

代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
 <BODY>
  <table border ="1">
    <tr>
<td>
   <div>11</div><input type="hidden" value="aaa" name="test" />
   <input type="text" name="name" onclick="f1()" value="@@@@@@@@@@@@@" />
</td>
</tr>
  </table>
 </BODY>
<script>
 function f1(o){
  /**
   */
 }
</script>
</HTML>问题如题！

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
    </HEAD>
    <BODY>
      <table border ="1" id="tb">
        <tr>
    <td>
      <div>11 </div> <input type="hidden" value="aaa" name="test" />
      <input type="text" name="name" onclick="f1()" value="@@@@@@@@@@@@@" />
    </td>
    </tr>
      </table>
        <input type="button" onclick="test()" value="修改文字">
    </BODY>
    <script>
    function f1(o){
      /**
      */
    }
    function test(){
        var tb=document.getElementById("tb");
        for(var i=0;i<tb.rows.length;i++){
            for(var j=0;j<tb.rows[i].cells.length;j++){
                var tagsLen=tb.rows[i].cells[j].childNodes.length;
                for(var k=0;k<tagsLen;k++){
                   if( tb.rows[i].cells[j].childNodes[k].innerHTML) tb.rows[i].cells[j].childNodes[k].innerHTML="修改了";
                   if(tb.rows[i].cells[j].childNodes[k].value) tb.rows[i].cells[j].childNodes[k].value="又修改了"
                }
            }
        }
    }
    </script>
    </HTML>