Agregar el panel de pestaña jQuery a un DIV específico

Question

Estaba seguro de que ya había una respuesta a esta pregunta, pero he pasado varias horas sin suerte.

Esta es mi configuración básica.

<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>

Cuando agrego dinámicamente una nueva pestaña, me gustaría que apareciera la pestaña dentro del "paneles" Div como "Panel 1" y "Panel 2".

Sin embargo, cuando agrego dinámicamente "Tab 3" (ver más abajo) "Panel 3" se agrega debajo de la pestaña Paneles, no dentro de ella.

<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>

¿Cómo puedo agregar mi nuevo panel "Panel 3" al Div "Paneles"?

Answer 1

Como esto:

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

Esta voluntad Muevete panel3 en el interior panels

Answer 2

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