如何在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中的所有其他元素之后追加“什么”，所以在这种情况下，“回复表单”将出现在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>" );

Answer 2

您是否尝试使用after（）？

http://api.jquery.com/after/

Answer 3

使用.after()

以下是一个例子：

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

可以创建内容，然后一次在多个元素之后插入：

$('.inner').after('<p>Test</p>');

每个内部元素都会获得这个新内容：

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>

也可以选择DOM中的元素并将其插入另一个元素之后：

$('.container').after($('h2'));

如果以这种方式选择的元素插入其他地方，它将被移动而不是克隆：

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<h2>Greetings</h2>

Answer 4

希望这可以帮到你：

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