javascript - 在焦点子项之后追加

Question

我有一个 ID 为 wrapper 的 div，并且我使用 .append() 在该 div 的末尾插入一些内容，如下所示:

$("#wrapper").append('Some divs and input fields');

但是，我还希望可以选择在包装器中聚焦的 content div 之后插入一个新的子元素。

如果 HTML 输出如下所示:

<div id="wrapper">
    <div class="content">
        <div class="subcontent">
             First div
            <input type="text" />
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Second div
            <input type="text" />
        </div>
    </div>
</div>

第一个 content div 中的输入字段处于焦点状态，我想在该 div 之后插入一个元素，所以我得到了:

<div id="wrapper">
    <div class="content">
        <div class="subcontent">
             First div
            <input type="text" />
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Third div
            <input type="text" />
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Second div
            <input type="text" />
        </div>
    </div>
</div>

我该怎么做？

Answer 1

$(':focus') 将为您提供焦点元素，而 closest('.content') 则提供其祖先类 content 然后使用 after 插入元素。

$(':focus').closest('.content').after(whatever_element_you_want_to_add);