document.querySelectorAll('.image').forEach(el => { el.querySelector('span').addEventListener('click', (e) => { const clickedElement = e.target; document.querySelector('.append').append(clickedElement); }); }); .image { background: red; cursor: pointer; } .append { margin-top: 20px; background: yellow; } <div class="image"> <span>image1</span> </div> <div class="image"> <span>image2</span> </div> <div class="append"></div> Entonces, estoy tratando de averiguar por qué cuando hago clic en el texto de la imagen 1 image1 or image2 la imagen 2 en el fondo rojo, se agrega al fondo amarillo pero desaparece del fondo rojo. ¿Cómo evitar que desaparezca del fondo rojo?
Debe clonar el elemento para hacer una copia usandoNode.cloneNode() :
const clickedElement = e.target.cloneNode(true); document.querySelectorAll('.image').forEach(el => { el.addEventListener('click', (e) => { const clickedElement = e.target.cloneNode(true); document.querySelector('.append').append(clickedElement); }); }); .image { background: red; cursor: pointer; } .append { margin-top: 20px; background: yellow; } <div class="image"> <span>image1</span> </div> <div class="image"> <span>image2</span> </div> <div class="append"></div>.append() está moviendo el nodo en sí mismo.cloneNode(true) (pasado como true para clonar el subárbol también) creará una copia que puede agregar mientras deja el original en su lugar en el DOM:
document.querySelectorAll('.image').forEach(el => { el.addEventListener('click', (e) => { const clickedElement = e.target; const clonedElement = clickedElement.cloneNode(true); document.querySelector('.append').append(clonedElement); }); }); .image { background: red; cursor: pointer; } .append { margin-top: 20px; background: yellow; } <div class="image"> <span>image1</span> </div> <div class="image"> <span>image2</span> </div> <div class="append"></div>