Javascript 使用jquery将元素追加到子元素

我想动态地向表中追加一个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

JQuery

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

$（“输入”）。单击（“单击”，函数（）{
console.log（$（“#行3”））
$（“#第3行”）。追加（“追加div”）；
});

但是代码将元素附加到该行（row3）。我尝试将div附加到元素行3之前，因为我只知道元素的ID，因此.children（）或.eq（）不能用于此目的。有人能帮我吗。提前感谢

然后使用：

$（“输入”）。单击（“单击”，函数（）{
美元（“#第3行”）。之前（“追加div”）；
});

演示：然后使用：

$（“输入”）。单击（“单击”，函数（）{
美元（“#第3行”）。之前（“追加div”）；
});

---

演示：

所有DOM操作方法：。仅供参考，即使您希望“附加”在表上执行，也不要在tr或td范围上执行tbody作用域所有DOM操作方法：。仅供参考，即使您希望“附加”在表上执行，也不要在tr或td范围上执行tbody作用域

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