将 Jquery 选项卡面板添加到特定 div

Question

我确信这个问题已经有了答案，但我花了几个小时寻找，但没有运气。

这是我的基本设置。

<div id='container'>
  <ul id="tabs">
    <li>Tab 1</li>
    <li>Tab 2</li>
  </ul>
  <div id="panels">
    <div>panel 1</div>
    <div>panel 2</div>
  </div>
</div>

当我动态添加新选项卡时，我希望该选项卡显示在“面板”div 内，如“面板 1”和“面板 2”。

但是，当我动态添加“选项卡 3”（见下文）时，“面板 3”将添加到面板选项卡下方而不是其内部。

<div id='container'>
      <ul id="tabs">
        <li>Tab 1</li>
        <li>Tab 2</li>

        <li>Tab 3</li>

      </ul>
      <div id="panels">
        <div>panel 1</div>
        <div>panel 2</div>
      </div>

      <div>panel 3</div>

    </div>

如何将新的“panel 3”面板添加到“panels”div？

Answer 1

像这样：

$('#panel3').appendTo('#panels');

这将在panels内移动panel3

Answer 2

$("#panels").append("<div> panel3</div>");