Javascript 为什么jQuery append不能按预期工作

目前，我有以下表格结构：

<tr>
    <th></th>
    <th class="afterThat"></th>
    <th></th>
    <th></th>
</tr>

我想把它做成这样

<tr>
    <th></th>
    <th class="afterThat"></th>
</tr>
<tr>
    <th></th>
    <th></th>
</tr>

为此，我使用以下jQuery，但它没有添加此

。我可以看到它是这样增加的<代码>

我是否做错了什么，或者如何才能做到这一点

$(".afterThat").after("</tr><tr>");

$（.afterThat”）。在（“”）之后；

更新：

<table class="footable table table-stripped toggle-arrow-tiny transaction-table">
<thead>        
    <tr class="footable-pagesize">
        <th align="left">Show</th>
        <th class="afterThat">
            <select id="transaction-per-page" class="float-left">
                <option value="5">50 Per Page</option>
                <option value="10">100 Per Page</option>
                <option value="20">150 Per Page</option>
                <option value="50">200 Per Page</option>
            </select>
        </th>            
        <th data-breakpoints="xs" width="">
            <div id="reportrange"  class="primary-icon dateRangePicker" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                <i class="fa fa-calendar"></i>&nbsp;
                <span></span> <i class="fa fa-caret-down"></i>
            </div>
        </th>
        <th data-breakpoints="xs" class="footable-expor-pdf" align="right">
            <a href="" class="primary-icon">  <i class="fas fa-file-pdf fa-2x icon"> </i></a>
            &nbsp;
            <a href="" class="primary-icon">  <i class="fas fa-file-excel fa-2x icon"> </i></a>
        </th>
    </tr>
    <tr>
        <th data-breakpoints="xs">Date</th>
        <th data-breakpoints="xs">Description</th>
        <th>Transaction Id</th>
        <th>Amount</th>
    </tr>
</thead>
</table>

这是我现在拥有的HTML代码：

<table class="footable table table-stripped toggle-arrow-tiny transaction-table">
<thead>        
    <tr class="footable-pagesize">
        <th align="left">Show</th>
        <th class="afterThat">
            <select id="transaction-per-page" class="float-left">
                <option value="5">50 Per Page</option>
                <option value="10">100 Per Page</option>
                <option value="20">150 Per Page</option>
                <option value="50">200 Per Page</option>
            </select>
        </th>            
        <th data-breakpoints="xs" width="">
            <div id="reportrange"  class="primary-icon dateRangePicker" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                <i class="fa fa-calendar"></i>&nbsp;
                <span></span> <i class="fa fa-caret-down"></i>
            </div>
        </th>
        <th data-breakpoints="xs" class="footable-expor-pdf" align="right">
            <a href="" class="primary-icon">  <i class="fas fa-file-pdf fa-2x icon"> </i></a>
            &nbsp;
            <a href="" class="primary-icon">  <i class="fas fa-file-excel fa-2x icon"> </i></a>
        </th>
    </tr>
    <tr>
        <th data-breakpoints="xs">Date</th>
        <th data-breakpoints="xs">Description</th>
        <th>Transaction Id</th>
        <th>Amount</th>
    </tr>
</thead>
</table>

显示
每页50英镑
每页100英镑
每页150
每页200
日期
描述
事务Id
数量

您需要创建一个新的

并在其中附加两个

：

• 在第一个后插入新的
  ：

  tr.after（“”）
  

• 选择要移动的
  s:

  tr.find（'th:nth child（n+3）'）

• 将它们附加到新创建的
  ：

  .appendTo（tr.next（））

let tr=$（'tr'）；
tr.after（“”）；
tr.find（'th:nth child（n+3'））.appendTo（tr.next（））

第一
第二
第三
第四
只能添加有效的DOM元素<代码>

不是有效的DOM元素。DOM不是字符串。可能与我添加的原始HTML代码重复。你能检查一下吗？有什么问题吗？因为它仍然不是working@Shibbir我编辑了我的答案。我一整天的英雄：）