CODEWITHSUNDEEP
javascriptjqueryhtml
DanBrad
DanBrad

Reputation: 25

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

Upvotes: 1

Views: 6246

Answers (4)

wpdaniel
wpdaniel

Reputation: 762

Try this:

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

and the js:

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

Upvotes: 0

SK.
SK.

Reputation: 4358

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.

Upvotes: 0

mcolo
mcolo

Reputation: 136

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

Upvotes: 1

Tom
Tom

Reputation: 7740

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

Upvotes: 1

Related Questions