本页面演示了在Chrome Canary中可用的实验性moveBefore() DOM API的使用，该API已集成到htmx的hx-preserve属性中（如果可用）。
moveBefore()要使演示正常工作，您需要安装Chrome Canary并启用该API：
htmx在hx-preserve功能中利用了这个API（如果可用），允许您将元素标记为"保留"，并在新内容合并时保留其所有状态，即使它在屏幕上移动位置。这比当前的替代方案（如变形）提供了更好的开发者体验，后者依赖于新页面结构"足够接近"以避免移动视频等元素。
如果您检查下面的视频，您会看到它嵌入在一个div元素中。如果您点击"查看详情"链接（该链接已被增强），您将转换到另一个页面，其中视频元素具有相同的ID，但嵌入在figure元素中。如果没有moveBefore()功能，在这种情况下保持视频播放是不可能的，因为"重新父级化"（即更改元素的父级）会导致其重置。
moveBefore()通过允许开发者在完全改变页面布局的同时保留元素的播放状态、焦点等，为Web开发开辟了大量可能性。