Remove div and replace using button onclick

Question

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

Answer 1

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

Answer 2

You can accomplish this easier with jquery, first be sure to put the jquery include within your head tags. This is the latest version of jquery:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

given this html:

<div id="div1">div1</div>
<div id="div2">div2</div>
<button id="toggle">toggle</button>

and this css:

#div2 { display:none; }

you can use this jquery:

$("#toggle").click( function() {
    $("#div1,#div2").toggle();
});

this will toggle back and forth between the divs, jsfiddle here > http://jsfiddle.net/WMPx7/

if you don't want to toggle the divs, you can change the jquery to look like this:

$("#toggle").click( function() {
    $("#div1").hide();
    $("#div2").show();
});

Answer 3

Try this:

<a href="javascript:void(0);" onclick="elements();">hideshow divs</a>

and the js:

function elements() {
    $('#div1').hide();
    $('#div2').show();
}

Answer 4

I am presuming that your both div have an id attribute and have some data.

Pure Javascript

function fnChangeDivContent(){
   document.getElementById("div1").innerHTML = document.getElementById("div2").innerHTML;
}

HTML

<input type ="button" value = "Replace Div Content" onclick = "fnChangeDivContent()" />

might help you.