jQuery将一个div的内容移动到另一个append（）中不起作用

Question

I am working on a tabbed layout using Bootstrap 2.3.2 in Joomla and due to the way Hikashop generates a product layout, I have an outer "tab-content" div and when putting in a product description, the result is an inner "tab-content div within a "tab-pane" with a single nav at the top of the page. I am attempting to move the inner "tab-pane"s to the outer "tab-content" via jQuery using append() so that the nav will function correctly. Needless to say this is not working. The nav is not functioning period, and the content that has been appended is getting duplicated.

here is what my code looks like:

<ul class="nav nav-tabs">
    <li><a href="#home" data-target="#home" data-toggle="tab">Home</a>
    </li>
    <li><a href="#profile" data-target="#profile" data-toggle="tab">Profile</a>
    </li>
    <li><a href="#messages" data-target="#messages" data-toggle="tab">Messages</a>
    </li>
    <li><a href="#settings" data-target="#settings" data-toggle="tab">Settings</a>
    </li>
</ul>

<div id="outer" class="tab-content">
    <div class="tab-pane active" id="home">
        <div id="inner" class="tab-content">
            <div class="tab-pane" id="profile">...</div>
            <div class="tab-pane" id="messages">...</div>
        </div>
    </div>
    <div class="tab-pane" id="settings">...</div>
</div>

<script>
    jQuery(document).ready(function() {
        jQuery("#inner").append("#outer");
    });
</script> 

and here is the desired outcome:

<div id="outer" class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    <div class="tab-pane" id="profile">...</div>
    <div class="tab-pane" id="messages">...</div>
    <div class="tab-pane" id="settings">...</div>
</div>

Answer 1

使用appendTo ：

jQuery("#inner").children().appendTo("#outer");

Answer 2

try this:

  jQuery(document).ready(function() { jQuery("#inner").appendTo('#outer'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div id="outer" class="tab-content"> <div class="tab-pane active" id="home"> --start inside #home -- <div id="inner" class="tab-content"> <div class="tab-pane" id="profile">#profile</div> <div class="tab-pane" id="messages">#messages</div> </div> --end inside #home -- </div> <div class="tab-pane" id="settings">--inside #settings --</div> -- outside tab-pane -- </div>