Estoy tratando de seleccionar de una lista de objetos de splid tanto el último elemento de la lista (elementA) como un elemento específico (con índice -1, elementoB). Quiero intercambiar un subelemento de elementB con un subelemento (mismo nombre de clase) de elementA. Desafortunadamente, esto no funciona, porque cada vez que se elimina el subelemento de elementA y no puedo averiguar por qué. Está correctamente insertado en elementB, pero ya no está en el DOM de elementA.
A continuación se muestra el código:
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 elementAContentTambién traté de hacer algo con .cloneNode(true) o con replaceChild pero desafortunadamente el comportamiento siempre es el mismo.
En realidad, no clonaste nada, solo realizaste un comando insertBefore en un elemento existente, por lo que ese elemento se movió. Debe llamar a.cloneNode() para clonar elementos y debe hacerlo antes de colocar el nodo clonado en una ubicación en el 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>