Quiero mover el elemento que ya está cargado a una posición diferente.
Me he referido a https://stackoverflow.com/a/16127049/19743544
Los métodos
appendChildagregan un elemento al DOM.
El método
insertAdjacentHTMLtoma una cadena en lugar de un elemento, por lo que tienen que analizar la cadena y crear elementos a partir de ella.
Puedo ver que tanto appendChild como insertAdjacentHTML en realidad están destinados a crear un elemento en lugar de mover el elemento cargado a algún lugar.
En el siguiente ejemplo, ¿cómo muevo el div .apple a la sección main antes del div orange ?
const main = document.querySelector('.main'), apple = document.querySelector('.apple'), orange = document.querySelector('.orange'); <section class="main"> <div class="orange"></div> </section> <div class="apple"></div>Utilice insertarAntes
const main = document.querySelector('.main'), const apple = document.querySelector('.apple'), const orange = document.querySelector('.orange'); main.insertBefore(apple, orange);Tenga en cuenta que tanto insertBefore como appendChild (en caso de que desee agregarlo en la última posición) moverán el elemento si ya existe en el DOM
Si el elemento secundario dado es una referencia a un nodo existente en el documento, appendChild() lo mueve de su posición actual a la nueva posición.