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

You can use jQuery to easily do that. $("#div1").remove(); $("#div2").show(); — CappY
– CappY, Commented Jan 21, 2014 at 21:26
using the show method doesn't work as it doesn't load the fresh script that is inside div2, it only loads the html. is there a jquery that will load div2 complete — DanBrad
– DanBrad, Commented Jan 23, 2014 at 11:16
@DanBrad - if you've solved this based on one of the answers below, I suggest marking the question answered. You should probably sort out why you are having trouble with jquery, but that is probably best asked in a different question. You'll need to supply more detail too. — JBCP
– JBCP, Commented Jan 29, 2014 at 23:16

Tom · Accepted Answer · 2014-01-21 21:41:56Z

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

edited Jan 21, 2014 at 21:41

answered Jan 21, 2014 at 21:30

Tom

7,7401 gold badge26 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mcolo · Accepted Answer · 2014-01-21 21:44:37Z

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

SK. · Accepted Answer · 2014-01-21 21:46:33Z

0

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.

answered Jan 21, 2014 at 21:46

SK.

4,3885 gold badges33 silver badges51 bronze badges

Comments

MarthyM · Accepted Answer · 2015-06-05 19:36:48Z

0

Try this:

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

and the js:

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

edited Jun 5, 2015 at 19:36

MarthyM

1,8492 gold badges22 silver badges24 bronze badges

answered Jan 21, 2014 at 21:29

wpdaniel

7621 gold badge8 silver badges26 bronze badges

Collectives™ on Stack Overflow

Remove div and replace using button onclick

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related