将 div 移动到其他父级，因此它继承自该父级 [重复]

Posted 2023-05-09

【中文标题】将 div 移动到其他父级，因此它继承自该父级 [重复]

【英文标题】：Move div to other parent, so it inherits from that parent [duplicate]

【发布时间】：2012-03-25 08:55:13

【问题描述】：

可能重复：How to move an element into another element?

我基本上想将父级重新分配给我的 DIV：

<DIV id='main'>
   <DIV id='child'>

   </DIV>
</DIV>
<DIV id='surrogate'>
</DIV>

所以我希望孩子成为代理人的孩子。

我试过了：

var $a = $('#child');
var contents = $a.contents();
$a.remove();
$('#surrogate').append('<p>' + contents + '</p>');

但它只会输出：[object Object]

有没有更好/更有效的方法来将父级重新分配给整个元素树，而无需读取内容复制或克隆它？ 好吧，也许克隆有效，但我宁愿只是移动它。

【参考方案1】：

您想从返回字符串的子项内部获取 html，以便您可以按照自己的方式连接它

var $a = $('#child');
$('#surrogate').append('<p>' + $a.html() + '</p>');

$a.remove();

contents() 正在返回一个 jQuery 对象，你不能连接一个对象和字符串

【讨论】：

+2，但是 OP：请注意 child 尚未包含 <p>，当您将其附加到代理 div 时，该 <p> 将被另一个 <p> 包裹（即， $a.html() == '<p>Old content of child div.</p>';).