如何移动 HTML 元素

Posted 2023-02-16

【中文标题】如何移动 HTML 元素

【英文标题】：How to move HTML element

【发布时间】：2011-03-22 10:00:40

【问题描述】：

如何将 html 元素移动到另一个元素。请注意，我不是指移动元素的位置。考虑以下 HTML 代码：

<div id="target"></div>
<span id="to_be_moved"></span>

我想将“to_be_moved”移动到“target”，所以“target”现在有了子“to_be_moved”。所以结果应该是这样的：

<div id="target"><span id="to_be_moved"></span></div>

我在谷歌搜索过（特别是使用原型框架），但我得到的只是移动位置，而不是我想要的。之前谢谢。

【参考方案1】：

document.getElementById('target').appendChild(  document.getElementById('to_be_moved') )

【讨论】：

“to_be_moved”怎么样？它还在原来的地方吗？

嗯？元素的父元素会改变，所以它被“移动”了。该节点并没有被“移除”，因为它现在位于 DOM 树的其他位置。

"如果给定子节点是对文档中现有节点的引用，则 appendChild() 将它从当前位置移动到新位置..." @987654321 @。知道组合相当于移动而不是复制很有用。它并不隐含在命名中。 node.cloneNode() 将...按照它所说的去做。

【参考方案2】：

假设您使用的是原生 DOM 元素，javascript 方法 .appendChild 将满足您的需求。

在原生 Javascript 中，document.getElementByID 可能是获取 DOM 元素的最佳选择，所以...

var target = document.getElementById('target')
document.getElementById('to_be_moved').appendChild(target)