jquery - 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

You need to use .append(), .html() will overwrite the contents.

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

You can use jquery element constructor for more clarity.

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

See viewsource in this Demo

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' />");