Question

I was sure there was an answer to this question already but I’ve spent several hours looking with no luck.

This is my basic setup.

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

When I dynamically add a new tab I would like the tab to appear inside the “panels” div like “panel 1” and “panel 2”.

However, when I dynamically add “tab 3” (see below) “panel 3” is added below the panels tab not inside it.

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

How can I add my new “panel 3” panel to the “panels” div?

Answer 1

Like this:

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

This will move panel3 inside panels