javascript - 修改 HTML 的 "tree"对象？

Question

假设我有一个像这样的简单结构:

<div id="A"> 
    <div id="B"> 
        <div id="C"> </div>
    </div>
</div>
<div id="X"> </div>

例如，是否有可能以某种方式(javascript、css、jQuery)更改 C 的位置并使其成为 X 的子级？描述这种情况的术语是什么？

Answer 1

这是可能的。如果你不想依赖任何库，你可以这样做:

document.getElementById('X').appendChild(document.getElementById('C'));

这里的技巧是 HTML 元素最多可以存在于树中的一个位置，但 DOM 会为我们处理这个。因为你告诉它让 C 成为 X 的 child ，但 C 已经是 B 的 child ，DOM 知道让 C 不再是 B 的 child 。这一切都作为一个 Action 处理，所以页面只有回流一次，这对性能有好处。