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

【问题标题】：jQuery move contents of one div into another append() not workingjQuery将一个div的内容移动到另一个append（）不起作用
【发布时间】：2015-04-24 09:14:54
【问题描述】：

我正在使用 Joomla 中的 Bootstrap 2.3.2 进行选项卡式布局，由于 Hikashop 生成产品布局的方式，我有一个外部“选项卡内容”div，当放入产品描述时，结果是“选项卡窗格”内的内部“选项卡内容 div”，页面顶部有一个导航。我正在尝试使用 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>

【问题讨论】：

标签： jquery twitter-bootstrap joomla

【解决方案1】：

使用appendTo:

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

【讨论】：

jQuery("#inner .tab-pane").appendTo("#outer");那行得通，谢谢！ append 和 appendTo 的功能区别是什么？
我编辑了我的答案。看一看。关于您的问题：“.append() 和 .appendTo() 方法执行相同的任务。主要区别在于语法 - 具体而言，内容和目标的位置。使用 .append()，前面的选择器表达式方法是插入内容的容器。另一方面，使用 .appendTo()，内容在方法之前，作为选择器表达式或动态创建的标记，然后将其插入目标容器。” api.jquery.com/append

【解决方案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>

【讨论】：