如何使用选择器在元素之后插入一个新元素

How to insert a new element after an element by using the selector

本文关键字：元素 一个 新元素 插入 何使用 选择器 之后      更新时间：2023-09-26

我只是想问一下，在点击按钮后，如何在特定元素后添加新元素。

下面是我的示例代码: 

    <table id="table-1" border="1" style="border: 1px solid #ccc; width: 100%">
        <thead>
            <tr>
                <td>TITLE</td>
                <td>TITLE</td>
                <td>TITLE</td>
                <td>TITLE</td>
                <td>TITLE</td>    
            </tr>
        </thead>
        <tbody id="no-row">
            <td colspan="5">no content</td>
        </tbody>            
        <tfoot>
            <tr>
                <td colspan="5">footer</td>
            </tr>
        </tfoot>    
    </table>
    <button id="add-row">Add Row</button>

我有这个简单的jquery: 

$('#add-row').on('click', function(){
        var counter = 1;
        var add_row = '<tbody>';
            add_row += '<tr>';
            add_row += '  <td>' + counter + '</td>';
            add_row += '  <td></td>';
            add_row += '  <td></td>';
            add_row += '  <td></td>';
            add_row += '  <td></td>';
            add_row += '</tr>';         
            add_row += '</tbody>';   
        
        $('#table-1 #no-row').remove();
        
        $('#table-1 thead').append(add_row);
                     
        counter++;             
                     
    });

但是它只是把它附加在标题里面。

小提琴来了:

http://jsfiddle.net/rochellecanale/gov88ucm/1/

append()在元素中插入指定的内容。要将它插入到元素之后，请使用after()方法:

$('#table-1 thead').after(add_row);

更新小提琴

如何将最新添加的行显示到底部?

可以选择tfoot，使用before():

$('#table-1 tfoot').before(add_row);

例子小提琴

试试这个…

将$('#table-1 thead').append(add_row);更改为$('#table-1').append(add_row); 

var counter = 1;
$('#add-row').on('click', function(){
    var add_row = '<tbody>';
        add_row += '<tr>';
        add_row += '  <td>' + counter + '</td>';
        add_row += '  <td></td>';
        add_row += '  <td></td>';
        add_row += '  <td></td>';
        add_row += '  <td></td>';
        add_row += '</tr>';         
        add_row += '</tbody>';   
    $('#table-1 #no-row').remove();
    $('#table-1').append(add_row);
    counter++;             
});

您需要使用after关键字。after关键字将参数指定的内容插入到匹配元素集合中的每个元素之后。

$('#table-1 thead').after(add_row);

您的<tbody>缺少<tr> 

<tbody>
  <tr id="no-row">
    <td colspan="5">no content</td>
  </tr>
</tbody>

更改add_row以删除tbody，然后直接添加到tbody 

$('#table-1 #no-row').remove();
$('#table-1>tbody').append(add_row)

这样，你的append函数是可重用的，因为你现在每次都要重新添加主体。

要具体回答这个问题，可以像上面那样在tr后面加上ID，把tbody从add_row中去掉，在no-row后面加上:

$('#table-1 #no-row').hide();
$('#table-1 #no-row').after(add_row)
相关文章：