将elem附加到父标记

Question

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

最终结果应如下所示：

在下面找到我简单易行的例子：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

如何在按钮的父元素之前将代码附加到我的append函数中？

感谢您的回复！

Answer 1

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

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>

Answer 2

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