JS 克隆 html 元素导致丢失初始元素

Question

我正在尝试从 splide 对象列表中挑选出列表的最后一个元素 (elementA) 和特定元素（索引为 -1, elementB）。我想将 elementB 的子元素与 elementA 的子元素（相同 class 名称）交换。不幸的是，这不起作用，因为每次删除 elementA 的子元素时，我都找不到原因。它已正确插入到 elementB 中，但不再位于 elementA.

的 DOM 中

代码如下：

const elementA = splide.Components.Slides.getAt(lastIndex);
const elementB = splide.Components.Slides.filter(slide => slide.index === -1);

const elementAContent= elementA[0].slide.querySelector('.element-container');
const elementBContent= elementB[0].slide.querySelector('.element-container');

const elementAToBeCloned = elementAContent.querySelector('.clone-element');

elementBContent.removeChild(elementBContent.firstElementChild);

elementBContent.insertBefore(elementAToBeCloned, elementBContent.firstElementChild); 
//doing so results in elementAToBeCloned to be lost within elementAContent

我也尝试用 .cloneNode(true) 或 replaceChild 做一些事情，但不幸的是行为总是一样的。

Answer 1

您实际上并没有克隆任何东西 - 您只是对现有元素执行了 insertBefore 命令，因此该元素被移动了。您需要调用 .cloneNode() 来克隆元素，并且需要在将克隆节点放置在 DOM.

中的某个位置之前执行此操作

const elementToClone = document.querySelector("div");
document.querySelector("button").addEventListener("click", function(evt){
  // Insert a newly cloned node at the end of the <body>
  document.body.insertBefore(elementToClone.cloneNode(true),document.body.lastChild);
});

<div>Foo Bar</div>
<button type="button">Clone</button>

JS 克隆 html 元素导致丢失初始元素

JS Cloning html element results in losing initial element

javascript

html

dom

splidejs