javascript - 如何在 li 元素之后直接附加 div，即使 li 是嵌套的

Question

如果我有以下内容:

<ul>
    <li id="comment-1">
        <div class="content">some content</div>
        <ul>
            <li id="comment-3">
                <div class="content">more content</div>
            </li>
        </ul>
    </li>
    <li id="comment-2"></li>
</ul>

每个<div class="comment">有一个回复按钮，我想直接在那个 div 下有(出现)一个在其他地方创建的回复论坛。我正在考虑使用 .append()但这会在该 div 中的所有其他元素之后附加“what ever”，因此在这种情况下，“回复表单”将出现在 li 的最后, 具有嵌套内容和一些嵌套可能相当长。

最终结果应该是:

<ul>
    <li id="comment-1">
        <div class="content">some content</div>
        <form></form> // appears when you click reply.
        <ul>
            <li id="comment-3">
                <div class="content">more content</div>
            </li>
        </ul>
    </li>
    <li id="comment-2"></li>
</ul>

我不熟悉如何产生这种影响。有人可以解释一下这是如何完成的，并可能链接到一个 jsfiddle，这样我就可以玩弄它以更好地理解所涉及的机制吗？

Answer 1

$( "#comment-1>.content" ).after( "<form>hello</form>" );