Element：moveBefore() 方法

尝试点击 几次，注意它是如何在两个位置之间切换的。

演示状态保留

在此演示中，我们提供了多种机制来移动包含 YouTube 嵌入的

元素在两个不同的容器之间，演示了 moveBefore() 如何保留嵌入的播放状态，而其他机制则不保留。

HTML

HTML 包含一个

元素，其中包含两个

元素。第一个

元素包含一个

元素，其中包含 YouTube 嵌入代码。我们还有一个

元素，其中包含三个

元素，我们稍后将添加功能，通过 JavaScript 在部分之间移动嵌入的

。

html

<article id="wrapper">
  <section id="section1">
    <div id="mover">
      <iframe
        width="300"
        height="200"
        src="https://www.youtube.com/embed/XvoENpR9cCQ?si=o2i6MvxugD-O5yyv"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerpolicy="strict-origin-when-cross-origin"
        allowfullscreen></iframe>
    </div>
  </section>
  <section id="section2"></section>
</article>
<div id="controls">
  <button id="move-before">move with <code>moveBefore()</code></button>
  <button id="insertbefore">move with <code>insertBefore()</code></button>
  <button id="prepend">move with <code>prepend()</code></button>
</div>

CSS

我们使用 Flexbox 进行布局，使两个

元素并排显示，并使按钮在 controls

内均匀分布。

css

#wrapper,
#controls {
  width: 100%;
  display: flex;
}

#wrapper {
  margin-bottom: 10px;
}

section {
  flex: 1;
  padding: 10px;
}

#controls {
  display: flex;
  justify-content: space-around;
}

#section1 {
  background-color: hotpink;
}

#section2 {
  background-color: orange;
}

#mover {
  max-width: 100%;
  background-color: black;
}

JavaScript

在我们的脚本中，我们通过 addEventListener() 为每个

附加 click 事件监听器。当按钮被点击时，我们检查哪个

元素是我们的嵌入

的 parentElement，然后使用相关函数（moveBefore()、insertBefore() 或 prepend()）将其移动到另一个

元素内部。

js

const section1 = document.getElementById("section1");
const section2 = document.getElementById("section2");
const mover = document.getElementById("mover");
const moveBeforeBtn = document.getElementById("move-before");
const insertbeforeBtn = document.getElementById("insertbefore");
const prependBtn = document.getElementById("prepend");

moveBeforeBtn.addEventListener("click", () => {
  if (mover.parentElement === section1) {
    section2.moveBefore(mover, null);
  } else {
    section1.moveBefore(mover, null);
  }
});

insertbeforeBtn.addEventListener("click", () => {
  if (mover.parentElement === section1) {
    section2.insertBefore(mover, null);
  } else {
    section1.insertBefore(mover, null);
  }
});

prependBtn.addEventListener("click", () => {
  if (mover.parentElement === section1) {
    section2.prepend(mover);
  } else {
    section1.prepend(mover);
  }
});

结果

渲染后的示例如下所示：

尝试播放 YouTube 嵌入，然后点击每个

几次，以将

元素的屏幕位置从左向右切换。请注意，在使用 insertBefore() 和 prepend() 的情况下，嵌入状态在每次移动后都会重置，因此需要重新启动。然而，在使用 moveBefore() 的情况下，状态在每次移动后都会保留。

规范

规范
DOM # dom-parentnode-movebefore

浏览器兼容性

另见

• Document.moveBefore()
• DocumentFragment.moveBefore()
• Node.insertBefore()

帮助改进 MDN

了解如何贡献

此页面上次修改于 2025 年 9 月 16 日，由 MDN 贡献者完成。

在 GitHub 上查看此页面 • 报告此内容的问题