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

【问题标题】：Add a DOM element between two children在两个孩子之间添加一个 DOM 元素
【发布时间】：2011-07-29 14:06:46
【问题描述】：

我想在两个孩子之间添加一个 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>');
});

但是可惜这会在末尾添加元素。

【问题讨论】：

developer.mozilla.org/En/DOM/Node.insertBefore。这就是您要查看的方法。我相信下面的答案将使用 jQuery 的版本。

标签： javascript jquery dom-manipulation

【解决方案1】：

试试

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

【讨论】：

【解决方案2】：

查看insertAfter() 或insertBefore()

【讨论】：

【解决方案3】：

jquery 有 .insertBefore 和 .insertAfter，它们都可以满足您的需求。

【讨论】：

【解决方案4】：

试试这个：

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

查看这些以了解更多信息：

【讨论】：