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')); });
Advertisement
Answer
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>