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

zengzsys 于 2023-04-20 发布在 jQuery

关注(0)|答案(4)|浏览(133)

此问题已在此处有答案：

How to move an element into another element（16个答案）
7年前关闭。
我正在使用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（）函数，但在实践中没有任何运气。（）和.parents（）函数，但似乎无法编写一个可行的解决方案。我也考虑过更改CSS，以便元素绝对定位-但坦率地说，页面设置为流体元素遍布，我真的希望这些元素能在他们的新父母身上传播开来。
任何帮助这是非常感谢。

jquery

来源：https://stackoverflow.com/questions/2596833/how-to-move-child-element-from-one-parent-to-another-using-jquery

4条答案

按热度按时间

wfveoks01#

由于Jage的答案完全删除了元素，包括事件处理程序和数据，所以我添加了一个简单的解决方案，由于detach函数，它不会这样做。

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

编辑：

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

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

赞(0）回复(0）举报 2023-04-20

uidvcgyl2#

Detach不需要。

答案（截至2013年）很简单：

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

根据http://api.jquery.com/append/
也可以选择页面上的元素并将其插入到另一个元素中：
$（'. container'）.append（$（'h2 '））;
如果以这种方式选择的元素被插入到DOM中的其他位置，它将被移动到目标中（而不是克隆）。

赞(0）回复(0）举报 2023-04-20

xfb7svmp3#

$('#parent2').prepend($('#table1_length')).prepend($('#table1_filter'));
对你不起作用？我觉得应该...

赞(0）回复(0）举报 2023-04-20

lawou6xi4#

根据提供的答案，我决定做一个快速插件来做到这一点：

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

使用方法：

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

赞(0）回复(0）举报 2023-04-20

我来回答

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

4条答案

相关问题

热门标签

最新问答