jquery将新元素插入表格单元格而不删除其他元素

Question

一个表包含多行，每行包含四个单元格。

在id=tdJane的单元格中，我已经有两个输入元素：

<table>
    <tr>
        <td id="tdBob">
            <input type="hidden" id="hida" value="some stuff">
            <input type="hidden" id="hidb" value="other stuff">
        <td>
        <td id="tdJane">
            <input type="hidden" id="hid1" value="some text">
            <input type="hidden" id="hid2" value="other text">
        <td>
    </tr>
</table>

进入单元格#tdJane，我希望在#hid2下面插入一个新的隐藏输入字段

我试过了：

$('#tdJane').html('<input type="hidden" id="hid3" value="newest text">') 

但是会覆盖单元格的现有内容。

我该怎么做？

Answer 1

您需要使用 .append() ，.html()会覆盖内容。

$('#tdJane').append('<input type="hidden" id="hid3" value="newest text">');

您可以使用jquery元素构造函数来更清晰。

 $('#tdJane').append($('<input/>',{type:'hidden',
                                   id: 'hid3',
                                   value:'newest text'}));

请参阅此 Demo

中的viewsource

Answer 2

你的HTML有问题，但你也应该使用jQuery的.append()方法。您的HTML看起来应该更像：

<table>
  <tr>
    <td id='tdBob'>
      <input type='hidden' id='hida' value='some stuff' />
      <input type='hidden' id='hidb' value'other stuff' />
    </td>
    <td id='tdJane'>
      <input type='hidden' id='hid1' value='some text' />
      <input type='hidden' id='hid2' value='other text' />
    </td>
  </tr>
</table>

你的jQuery看起来应该更像：

$('tdJane').append("<input type='text' id='hid3' value='newest text' />");