代码之家 › 专栏 › 技术社区 › ajreal

如何使用jquery[duplicate]将子元素从一个父元素移动到另一个父元素

jquery-plugins jquery

125

ajreal · 技术社区 · 15 年前

这个问题已经有了答案:

How to move an element into another element? 14答案

我正在使用jquery DataTables 插件。我想将搜索框(.datatables_filter)和要显示的记录数下拉列表(.datatables_length)从其父元素(.datatables_wrapper)移动到页面上的另一个div,而不会丢失任何已注册的javascript行为。例如,搜索框有一个附加到“keyup”事件的函数,我想保持它的完整性。

dom如下所示:

<body>
<div id="parent1">
  <div class="dataTables_wrapper" id="table1_wrapper">
    <div class="dataTables_length" id="table1_length">
      <select size="1" name="table1_length">
        <option value="10">10</option>
        <option value="25">25</option>
        <option value="50">50</option>
        <option value="100">100</option>
      </select>
    </div>
    <div class="dataTables_filter" id="table1_filter">
      <input type="text" class="search">
    </div>
    <table id="table1">
    ...
    </table>
  </div>
</div>
<div id="parent2">
  <ul>
    <li><a href="#">Link A</a></li>
    <li><a href="#">Link B</a></li>
    <li><a href="#">Link C</a></li>
  </ul>
</div>
</body>

这就是我希望dom在搬家后的样子:

<body>
<div id="parent1">
  <div class="dataTables_wrapper" id="table1_wrapper">
    <table id="table1">
    ...
    </table>
  </div>
</div>
<div id="parent2">
  <div class="dataTables_filter" id="table1_filter">
    <input type="text" class="search">
  </div>
  <div class="dataTables_length" id="table1_length">
    <select size="1" name="table1_length">
      <option value="10">10</option>
      <option value="25">25</option>
      <option value="50">50</option>
      <option value="100">100</option>
    </select>
  </div>
  <ul>
    <li><a href="#">Link A</a></li>
    <li><a href="#">Link B</a></li>
    <li><a href="#">Link C</a></li>
  </ul>
</div>
</body>

我一直在研究.append(),.appendto(),.prepend()和.prependto()函数,但在实践中没有得到任何成功。我还研究了.parent()和.parents()函数,但似乎无法编写可行的解决方案。我也考虑过修改css,这样元素就可以完全定位了——但是坦率地说,页面上到处都是流动的元素,我真的希望这些元素在新的父元素中浮动。

非常感谢您的帮助。

4 回复 | 直到 7 年前

Alex Lawford 15 年前

$('#parent2').prepend($('#table1_length')).prepend($('#table1_filter'));

不适合你吗?我觉得应该…

282

eric.itzhak 7 年前

由于jage的答案完全删除了元素,包括事件处理程序和数据,因此我添加了一个简单的解决方案,但它没有做到这一点,这要归功于 detach 功能。

var element = $('#childNode').detach();
$('#parentNode').append(element);

编辑:

Igor Mukhin在下面的评论中提出了一个更简短的版本:

$("#childNode").detach().appendTo("#parentNode");

153

Lee Taylor Dejan.S 10 年前

Detach 是不必要的。

答案很简单(截至2013年):

$('#parentNode').append($('#childNode'));

根据 http://api.jquery.com/append/

您还可以在页面上选择一个元素并将其插入另一个元素:

$('.container').append($('h2'));

如果以这种方式选择的元素插入到单个位置在dom的其他地方,它将被移动到目标中(而不是克隆)。

Ufuk HacÄ±oÄullarÄ± 12 年前

根据提供的答案,我决定制作一个快速插件来完成这项工作:

(function($){
    $.fn.moveTo = function(selector){
        return this.each(function(){
            var cl = $(this).clone();
            $(cl).appendTo(selector);
            $(this).remove();
        });
    };
})(jQuery);

用途:

$('#nodeToMove').moveTo('#newParent');