Crop elements with Javascript

Question

I’m having trouble moving elements on the screen with pure javascript. I need to "crop" the element of a place -> And send this element to another place , and do this with all the html that this element contains within it

Is there a way to cut the element from one location and send it to another? This is what I’ve tried to do:

bemVindo.classList.remove('bemVindo'); novoElemento.classList.add('novoElemento') 

but that way it only changes the class, and I need it to be "moved" to the other class.

Answer 1

If I understand the question correctly, using appendChild you get what you need.

const f = () => {
document.getElementById('destino').appendChild(document.getElementById('elemento'))
}

#origem {
background-color: red;}

#destino {
background-color: yellow;}

#origem,#destino {height: 60px;
width: 60px;}

<div style="display: flex; justify-content: space-around">
<div id="origem">
<div id="elemento"><a href="#">link</a></div>
</div>
<div id="destino"></div>
</div>

<input type="button" value="mover" onclick="f()" />