在两个子元素之间添加一个DOM元素

Question

我想在两个子元素之间添加一个dom元素，特别是在最后一个子元素之前。

<div id='parent'>
    <div class='nav-option'></div>
    <div class='nav-option'></div>
    <div class='nav-option'></div>
    {{I want to insert something here}}
    <div class='nav-option'></div>
</div>

我现在正在使用以下代码：

$('#add-account').click(function(event){                               
    $('#face').append('<div class="nav-select"></div>');
}); 

但是，不幸的是，这将元素添加到末尾。

- ocoutts

---

这是你需要查看的方法：https://developer.mozilla.org/zh-CN/docs/Web/API/Node/insertBefore。我相信接下来的答案将使用jQuery的版本。 - user1385191

Answer 1

试试这个：

$('div.nav-option:last')
    .before('<div class="nav-select"></div>');

阅读以下内容以了解更多：

• :last选择器
• .before()

- Andrew Hare

Answer 2

查看insertAfter()或insertBefore()

- Sean Adkinson

Answer 3

尝试

$('.nav-option:last').before('<div class="nav-select"></div>');

- Andrew Cooper

Answer 4

jQuery有.insertBefore和.insertAfter，两者都可以实现你想要的功能。

- user578895