将elem追加到父标记之前

Question

我使用JQuery 3.2.1，并希望在单元格前面附加一个具有特定值的表列。

最终结果应该如下所示：

​

​

下面是我简单可行的例子：

​

const targetButton = $(".btn.btn-primary.btn-sm.motherboard")
targetButton.append(`
        <td>
            <img src="" alt="" height="42" width="42">
            <a href="">
                Test Title
            </a>
        </td>    
        `)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="float: left;" class="table table-bordered">
  <tbody>
    <tr>
      <td>CPU</td>
      <td>
        <button type="button" data-exists="cpu" class="btn btn-primary btn-sm cpu">
                                            Add CPU
                                        </button>
      </td>
    </tr>
    <tr>
      <td>Motherboard</td>
      <td>
        <button type="button" data-exists="motherboard" class="btn btn-primary btn-sm motherboard">
                                            Add Motherboard
                                        </button>
      </td>
    </tr>
    <tr>
      <td>Graphic Card</td>
      <td>
        <button type="button" data-exists="graphic-card" class="btn btn-primary btn-sm graphic-card">
                                            Add Graphic Card
                                        </button>
      </td>
    </tr>
    <tr>
      <td>Power Supply&nbsp;</td>
      <td>
        <button type="button" data-exists="power-supply" class="btn btn-primary btn-sm power-supply">
                                            Add Power Supply
                                        </button>
      </td>
    </tr>
    <tr>
      <td>More Parts&nbsp;</td>
      <td>
        <button type="button" data-exists="more-parts" class="btn btn-primary btn-sm more-parts">
                                            Add More Parts
                                        </button>
      </td>
    </tr>
  </tbody>
</table>

​

如您所见，标签直接插入到按钮中。在我的整个Javascript应用程序的运行时，我只将按钮作为可用的选定元素。

如何在按钮的父元素之前添加append函数中的代码？

谢谢你的回复！

Answer 1

@CertainPerformance answer是对的。这是一个jquery解决方案。使用.closest()和insertBefore()

​

const targetButton = $(".btn.btn-primary.btn-sm.motherboard").closest('td');
$('<td><img src="" alt="" height="42" width="42"><a href="">Test Title</a></td>').insertBefore(targetButton);

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="float: left;" class="table table-bordered">
  <tbody>
    <tr>
      <td>CPU</td>
      <td>
        <button type="button" data-exists="cpu" class="btn btn-primary btn-sm cpu">
                                            Add CPU
                                        </button>
      </td>
    </tr>
    <tr>
      <td>Motherboard</td>
      <td>
        <button type="button" data-exists="motherboard" class="btn btn-primary btn-sm motherboard">
                                            Add Motherboard
                                        </button>
      </td>
    </tr>
    <tr>
      <td>Graphic Card</td>
      <td>
        <button type="button" data-exists="graphic-card" class="btn btn-primary btn-sm graphic-card">
                                            Add Graphic Card
                                        </button>
      </td>
    </tr>
    <tr>
      <td>Power Supply&nbsp;</td>
      <td>
        <button type="button" data-exists="power-supply" class="btn btn-primary btn-sm power-supply">
                                            Add Power Supply
                                        </button>
      </td>
    </tr>
    <tr>
      <td>More Parts&nbsp;</td>
      <td>
        <button type="button" data-exists="more-parts" class="btn btn-primary btn-sm more-parts">
                                            Add More Parts
                                        </button>
      </td>
    </tr>
  </tbody>
</table>

​

Answer 2

首先选择目标按钮的父元素：

​

const targetButton = $(".btn.btn-primary.btn-sm.motherboard")
const targetButtonParent = targetButton[0].parentElement;
targetButtonParent.insertAdjacentHTML('beforebegin', `
        <td>
            <img src="" alt="" height="42" width="42">
            <a href="">
                Test Title
            </a>
        </td>    
        `)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="float: left;" class="table table-bordered">
  <tbody>
    <tr>
      <td>CPU</td>
      <td>
        <button type="button" data-exists="cpu" class="btn btn-primary btn-sm cpu">
                                            Add CPU
                                        </button>
      </td>
    </tr>
    <tr>
      <td>Motherboard</td>
      <td>
        <button type="button" data-exists="motherboard" class="btn btn-primary btn-sm motherboard">
                                            Add Motherboard
                                        </button>
      </td>
    </tr>
    <tr>
      <td>Graphic Card</td>
      <td>
        <button type="button" data-exists="graphic-card" class="btn btn-primary btn-sm graphic-card">
                                            Add Graphic Card
                                        </button>
      </td>
    </tr>
    <tr>
      <td>Power Supply&nbsp;</td>
      <td>
        <button type="button" data-exists="power-supply" class="btn btn-primary btn-sm power-supply">
                                            Add Power Supply
                                        </button>
      </td>
    </tr>
    <tr>
      <td>More Parts&nbsp;</td>
      <td>
        <button type="button" data-exists="more-parts" class="btn btn-primary btn-sm more-parts">
                                            Add More Parts
                                        </button>
      </td>
    </tr>
  </tbody>
</table>

​