I have a div that renders automatically by a plugin, I want after the page has loaded, I can cut it from a place and put it inside the div that contains my image:
to exemplify I made this codepen, I want to change the div 'change-place' into the div 'contain-image'
in short I want to make a javascript that takes the blue div out of the red one and puts it inside the green one
$(document).ready(function() {
$('.contain-image').append($('.change-place'));
});
Your code works ... you have to add:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
If you want to use Vanilla JS code I upload this example.
window.addEventListener("load", myFunc);
function myFunc() {
let el = document.querySelector('.change-place');
document.querySelector('.contain-image').appendChild(el);
};.contain-image {
width: 500px;
height: 300px;
background: #00ff00;
display: inline-flex;
}
.minha-imagem {
width: 200px;
height: 200px;
}
.dolado {
width: 500px;
height: 300px;
background: #ff0000;
display: inline-flex;
}
.change-place {
width: 100px;
height: 100px;
background: #0000ff;
display: inline-flex;
color: #fff;
}<div class='contain-image'>
<div>
<h1>contem titulo</h1>
</div>
<div><img class="minha-imagem" alt="" src="" /></div>
<div><button>botão</button></div>
</div>
<div class="dolado">
<div class='change-place'>teste</div>
</div>