Question

假设我有以下div：

<div id="mydiv">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
</div>

我如何在jquery或javascript中使我能够在“mydiv”的第一个孩子之后追加一个元素。或者是否有一些选择器允许我在第一个孩子之后选择和追加？

<div>
 <div>1</div>
 <div>Place to Insert Subsequent div</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
</div>

Answer 1

您可以使用:first-child和after执行此操作：

$("#mydiv div:first-child").after(newDiv);

Demo

Answer 2

我更喜欢使用eq()代替first-child，因为它更灵活，如果我想将其更改为在第2或第3个div之后，我可以更改0 eq(0)函数中的值eq(1)或eq(2)。

 $("#mydiv div:eq(0)").after('<div>Place to Insert Subsequent div</div>')

http://jsfiddle.net/KjY7H/

Answer 3

为了保持可读性，您可以在变量中存储要追加的div：

var subsequentDiv = $('<div>Place to Insert Subsequent div</div>');

然后使用你的变量使用你喜欢的jQuery方法，在我的例子中我使用“insertAfter”：

subsequentDiv.insertAfter('#mydiv div:eq(0)'); // selects children by its index, the first div is equal to 0  
subsequentDiv.insertAfter('#mydiv div:lt(1)'); // selects children that its index is lower than 1 (it means the second div)

实现相同结果的另一种方法是使用“包含过滤器”读取div的内容：

subsequentDiv.insertAfter('#mydiv div:contains("1")');

http://jsfiddle.net/cadence96/tyBnX/1/

如何在jquery中的第一个子div之后追加元素？

3 个答案: