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 上檢視此頁面 • 報告此內容的問題