jQuery 将一个 div 的内容移动到另一个 append() 不起作用

Question

我正在使用 Joomla 中的 Bootstrap 2.3.2 进行选项卡式布局，由于 Hikashop 生成产品布局的方式，我有一个外部 "tab-content" div 并且当输入产品描述，结果是一个内部 "tab-content div within a " 选项卡窗格”，页面顶部有一个导航。我试图将内部 "tab-pane" 移到外部 "tab-content" 通过 jQuery 使用 append() 以便导航正常运行。不用说这是行不通的。导航未正常运行，附加的内容正在重复。

我的代码如下所示：

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

这是期望的结果：

<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

试试这个：

 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>

jQuery 将一个 div 的内容移动到另一个 append() 不起作用

jQuery move contents of one div into another append() not working

jquery

joomla

twitter-bootstrap