DanBrad DanBrad - 6 months ago 28
Javascript Question

Remove div and replace using button onclick

i would like remove a current div and replace with another using onclick with a button

i've tried the below method but as the old and new div's both contain different scripts it doesn't load the scripts in the new div correctly

document.getElementById("div1").style.display="block";
document.getElementById("div2").style.display="none";


I guess the best way is to actually remove div1 and replace with div2 loading a fresh?

how would i do this?

i've tried the jquery solutions but my website doesn't seem to like jquery. anyone know why? i've tried pure javascript and that works but not jquery. i'm loading jquery in the head :(

i understand my template relies heavily on mootools which can conflict with jquery

Tom Tom
Answer

jsFiddle

<div id="div1">div1 contents</div>
<div id="div2" style="display: none">div2 contents</div>
<button id="button">Button</button>

$('#button').on('click', function() {
    $('#div1').remove();
    $('#div2').show();
});

Or if you just want to replace the HTML

$('#button').on('click', function() {
    $('#div1').html($('#div2').html());
});
Comments