如何使用jQuery添加新元素

Question

我想添加一個帶有DOM操作的jQuery的新元素，但我對eq，nth等所有函數有點困惑。

這裏是我的基地建設：

<table class="tableInput"> 
    <tr> 
    <td></td> 
    </tr> 
</table> 
<table class="tableInput"> 
    <tr> 
    <td></td> 
    </tr> 
</table> 
<table class="tableInput"> 
    <tr> 
    <td></td> 
    </tr> 
</table> 
<table class="tableInput"> 
    <tr> 
    <td></td> 
    </tr> 
    Here should be the DOM-Manipulation 
</table> 
<table class="tableInput"> 
    <tr> 
    <td></td> 
    </tr> 
</table> 

凡「在這裏應該是DOM操縱」我想插入一個新的TableRow。

Answer 1

使用此：

$(".tableInput").eq(3).find('tr').append('<tr><td>Hello World..!</td></tr>');

.tableInput{border:1px solid;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="tableInput"> 
 
     <tr> 
 
     <td></td> 
 
     </tr> 
 
    </table> 
 
    <table class="tableInput"> 
 
     <tr> 
 
     <td></td> 
 
     </tr> 
 
    </table> 
 
    <table class="tableInput"> 
 
     <tr> 
 
     <td></td> 
 
     </tr> 
 
    </table> 
 
    <table class="tableInput"> 
 
     <tr> 
 
     <td></td> 
 
     </tr> 
 
    </table>

：當量（）可以通過索引來訪問在jQuery對象中的元素

http://api.jquery.com/eq-selector/

：第n個孩子也允許用戶通過訪問一個元件索引，但它只適用於它的左側的術語。

http://api.jquery.com/nth-child-selector/

Answer 2

您只需將一個新錶行到最後<table>元素這樣

$('table:last').prev().append('<tr><td>Here is your new table row</td></tr>')

table{ 
 
border:1px solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="tableInput"> 
 
    <tr> 
 
    <td>A</td> 
 
    </tr> 
 
</table> 
 
<table class="tableInput"> 
 
    <tr> 
 
    <td>B</td> 
 
    </tr> 
 
</table> 
 
<table class="tableInput"> 
 
    <tr> 
 
    <td>C</td> 
 
    </tr> 
 
</table> 
 
<table class="tableInput"> 
 
    <tr> 
 
    <td>D</td> 
 
    </tr> 
 
    <!--Here should be the DOM-Manipulation !--> 
 
</table> 
 

 
<table class="tableInput"> 
 
    <tr> 
 
    <td>E</td> 
 
    </tr> 
 
</table>

：EQ（），您可以通過指數

訪問jQuery對象中的元素

http://api.jquery.com/eq-selector/

：nth-​​child也允許你通過索引來訪問一個元素，但是它只適用於它的左側。

http://api.jquery.com/nth-child-selector/

Answer 3

您需要使用.after

$(document).ready(function(){ 
 
    $tr = '<tr><td>Hello</td></tr>'; 
 
    $('#myTable tr:first').after($tr); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="tableInput"> 
 
    <tr> 
 
    <td></td> 
 
    </tr> 
 
</table> 
 
<table class="tableInput"> 
 
    <tr> 
 
    <td></td> 
 
    </tr> 
 
</table> 
 
<table class="tableInput"> 
 
    <tr> 
 
    <td></td> 
 
    </tr> 
 
</table> 
 
<table class="tableInput" id="myTable"> 
 
    <tr> 
 
    <td></td> 
 
    </tr> 
 
</table>

Answer 4

您可以添加錶行具有以下幾個方面：1。 通過追加： 一個。未在前面聲明元素：

$("#tableInput").last().append('<tr><td></td></tr>'); 

b。與聲明元件：

var tableRow = $('<tr><td></td></tr>'); 
$("#tableInput").last().append(tableRow); 

通過後：

var tableRow = $('<tr><td></td></tr>');$("#tableInput").last().children().after(tableRow);