jquery - jQuery insertAfter 不工作

Question

我有一组按钮：

  <div id="button">
      <button id="show_link_group">Show Links</button>
      <button id="show_contact_group">Show Contacts</button>
      <button id="show_update_group">Show Updates</button>
      <button id="show_activity_group">Show Action Items</button>
  </div>

我试图在它之后插入我的这个 div：

<div id="link_group">

      <p1>adsfadsf</p1>
</div>

它应该在我单击 id="show_link_group" 的按钮后插入：

$('#show_link_group').click(function() {
  $("<div id='link_group'").after('<div id="button"></div>');
});

当我点击它时，它什么也没做。我遵循了这个文档：

http://api.jquery.com/insertafter/

我究竟做错了什么？？

谢谢！

Answer 1

您必须使用选择器来指定插入位置，而不是 HTML 字符串。

$("<div id='link_group'><p1>asdfasdf</p1></div>").insertAfter("#button");

如果link_groupDIV 已经在 DOM 中，您可以执行以下操作：

$("#link_group").insertAfter("#button");

这会将其从当前位置移动到按钮之后。

Answer 2

你有向后的 .after() 方法。你需要先告诉它，“我想在什么元素之后插入它。” 然后你告诉它要在那个元素之后插入的内容。

你有这个：

$('#show_link_group').click(function() {
  $("<div id='link_group'").after('<div id="button"></div>');
});

你要这个：

var content = "my content";
$('#show_link_group').click(function() {
   $("#button").after(content);
});

这是一个带有您的解决方案的 jsbin。http://jsbin.com/qaxan/1/edit