CODEWITHSUNDEEP
javascript
Marcius Leandro
Marcius Leandro

Reputation: 789

Javascript - change div after page load

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'

Code pen

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

Upvotes: 0

Views: 920

Answers (1)

54ka
54ka

Reputation: 3589

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>

Upvotes: 1

Related Questions