Javascript js：如何将这些append（）封装在一个div中？

我有一些js将prev/next链接附加到页面上的一组选项卡上：

我想把这两个链接放在一个div中，这样最终的代码将是：

<div class="navigation">
  <a href>previous</a>
  <a href>next</a>
</div>

我被难住了——我不能只在第一个标签和最后一个标签上添加标签，因为不在第一个标签和最后一个标签上显示下一个标签的聪明意味着它们并不总是同时存在。我试着用.after把js的两行代码括起来，写了一个div的开头和结尾，但是它在链接之后写了整个div，而不是在链接周围

---

我肯定有一个简单的解决方案，但我想不出来！非常感谢您的帮助。

您可以尝试最后一个，也可以尝试第一个。

这能满足您的需要吗

$("fieldset.vertical-tabs-pane").append('<div class="navigation"></div>');
$("fieldset.vertical-tabs-pane:not(':first') div.navigation").append("<a href='#' class='previous-tab' title='Go back to previous step'>< Back</a>");
$("fieldset.vertical-tabs-pane:not(':last') div.navigation").append("<a href ='#' class='next-tab' title='Continue to next step'>Next ></a>"); 

试试这个：

var nav = $('<div>', {
   id: 'navigation',
   html: "<a href='#' class='previous-tab' title='Go back to previous step'>< Back</a>\n\
<a href ='#' class='next-tab' title='Continue to next step'>Next ></a>"
});

nav.appendTo($('somewhere'));

这是创建的html：

<div id="navigation">
    <a href="#" class="previous-tab" title="Go back to previous step">&lt; Back</a>
    <a href="#" class="next-tab" title="Continue to next step">Next &gt;</a>
</div>

$("a.previous-tab, a.next-tab").wrapAll('<div class="navigation"/>');

---

这里有一个提琴演示：

创建链接后，只需执行以下操作：

<div id="navigation">
    <a href="#" class="previous-tab" title="Go back to previous step">&lt; Back</a>
    <a href="#" class="next-tab" title="Continue to next step">Next &gt;</a>
</div>

$("a.previous-tab, a.next-tab").wrapAll('<div class="navigation"/>');

希望这有帮助。

---

干杯

我的理解是.append和.prepend是针对整个元素的-因此，如果我尝试使用其中一种方法添加一个开场div，它会在一瞬间为我打开和关闭。啊，太棒了！先做导航div，然后附加到它上面！我不得不调整代码的其余部分以适应新的深度[.parents而不是.parent]，但现在它完全按照预期工作。谢谢这是我尝试的第一件事之一，但它将所有链接封装到一个div中，每个页面上有8-10组导航链接。所以他们都出现在了第一张账单上