Javascript 在单击的按钮下方插入行

我正在寻找一种在行的正下方插入元素的方法。我的表应该如下所示：

如您所见，以下元素插入到我的行下方：

<tr>
  <td></td>
  <td>
    <button type="button" data-exists="product2" class="btn btn-primary btn-sm product2">
                                        Add Product2
                                    </button>
  </td>
</tr>

添加产品2

在下面，您可以找到我的可行示例：

$（“.btn.btn dark.btn sm”）。在（“单击”，此。单击Dispatchetable.bind（此））
功能点击分派表（e）{
让plusButton=$（e.target）.closest（“.btn.btn-dark.btn-sm”）
if（plusButton.hasClass（“product2”））{
让plusButtonParent=plusButton[0]。parentElement
plusButtonParent.insertAdjacentHTML（'beforebeagin'`
添加产品2
`)
}
}

产品1
添加产品1
产品2
添加产品2
+
产品3
添加产品3
+

这是Javascript的一个问题。你很接近

这是有问题的一行：

let plusButtonParent = plusButton[0].parentElement;

您正在访问

元素。因此，在

启动之前插入

将导致如下结果：

<tr>
  <tr> <!-- this code is added -->
    <td>...</td> <!-- this code is added -->
  </tr> <!-- this code is added -->
  <td>...</td>
</tr>

您可能希望保持

产品2

处于顶部，如您的示例中所示。简单，只需将开始前的

更改为结束后的


$（“.btn.btn dark.btn sm”）。在（“单击”，此。单击Dispatchetable.bind（此））
功能点击分派表（e）{
让plusButton=$（e.target）.closest（“.btn.btn-dark.btn-sm”）
if（plusButton.hasClass（“product2”））{
让plusButtonParent=plusButton[0].parentElement.parentElement；
plusButtonParent.insertAdjacentHTML（'afterend'`
添加产品2
`)
}
}

产品1
添加产品1
产品2
添加产品2
+
产品3
添加产品3
+
这是css问题，不是js问题。您需要改变td的显示属性，使其显示在另一个td的下方，或者简单地使用divs而不是表格结构读取
javascript
标记，因为这是javascript的问题。看看我的答案。
let plusButtonParent = plusButton[0].parentElement.parentElement;