使用jQuery將元素追加到子元素

Question

我想將div元素動態添加到表中。 我使用以下代碼，但未正確附加

HTML

<table id="foo">
  <tr id="row1"><td>FOO</td> </tr>
  <tr id="row2"><td>BAR</td></tr>
  <tr id="row3"><td>APPENDING</td></tr>
  <tr id="row4"><td>ELEMENT</td></tr>
  <tr id="row5"><td>JQUERY</td></tr>
</table>

JQuery的

$("input").on("click",function(){
   console.log($("#row3"))
   $("#row3").append("<tr id='foo1'><td>Appending div</td></tr>");
});

小提琴的例子

但是代碼將元素追加到該row（ row3 ）。 我嘗試將div追加到元素row3之前，我只知道元素的ID，而.children（）或.eq（）不適用於此目的。 誰能幫我。 提前致謝

Answer 1

使用.before()然后：

$("input").on("click", function() {
   $("#row3").before("<tr id='foo1'><td>Appending div</td></tr>");
});

演示： http : //jsfiddle.net/zX64K/2/