I need to replace a div with another div using jQuery

Question

<div id="main">
    <div id="abc">
        <div>
            This is the div to be replaced
        </div>
    </div>
    <div id="xyz" style="display:none">
        <div>
            This is the div replaced
        </div>
    </div>
</div>

I've given it like this

$('#main').children('div:eq(0)').css('display','none')
$('#main').children('div:eq(0)').replaceWith($('#xyz').html())

But, if I see the output, I get it as <div>This is the div replaced</div> alone and not the parent div of that i.e <div id="xyz">

Why are you trying to replace the div at all? It seems like show/hide/toggle would be sufficient. — Kyle Decot
– Kyle Decot, Commented May 8, 2013 at 13:09
The code is replaced with the code that is inside the xyz-div. — SPRBRN
– SPRBRN, Commented May 8, 2013 at 13:11

Mr_Green · Accepted Answer · 2013-05-08 13:18:19Z

2

I think you are actually looking for toggle function.

Please check this fiddle

$('#main').click(function(){
    $('#main>div').toggle();
});

edited May 8, 2013 at 13:18

answered May 8, 2013 at 13:12

Mr_Green

42k48 gold badges171 silver badges277 bronze badges

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

Comments

user1508519 · Accepted Answer · 2013-05-08 13:11:35Z

1

http://api.jquery.com/html/

Essentially you're getting the innerHTML of $('#xyz'), rather than the entire tag itself.

Just do

$('#main').children('div:eq(0)').replaceWith($('#xyz'))

answered May 8, 2013 at 13:11

user1508519

Comments

VenkateshKumar · Accepted Answer · 2013-05-08 13:14:20Z

1

var isDisplayed = $("#main").find("#abc").css("display");
if(isDisplayed == "block"){
  $("#main").find("#abc").css("display","none");
  $("#main").find("#xyz").css("display","block");
}
else{
  $("#main").find("#abc").css("display","block");
  $("#main").find("#xyz").css("display","none");
}

answered May 8, 2013 at 13:14

VenkateshKumar

963 bronze badges

Comments

pythonian29033 · Accepted Answer · 2013-05-08 13:19:05Z

1

maybe you're looking for this:

$('#main').children('div:eq(0)').replaceWith(xyz);

answered May 8, 2013 at 13:19

pythonian29033

5,2175 gold badges34 silver badges57 bronze badges

Comments

dgo · Accepted Answer · 2013-05-08 13:14:06Z

0

I think this should do what you want:

$('#main div:first').html($('#xyz').html())

answered May 8, 2013 at 13:14

dgo

3,9796 gold badges36 silver badges54 bronze badges

3 Comments

Debjeet Das Over a year ago

<div id="main">        <div id="abc">              <div id="xyz" style="display:none">                  This is the div replaced              </div>         </div>     </div>

Debjeet Das Over a year ago

but i dont need the <div id="abc">

dgo Over a year ago

I just made that up briefly. I'm having trouble grokking exactly what you need. Perhaps if you could explain exactly what you would like to accomplish, I can provide some better insight.

Colin Bacon · Accepted Answer · 2013-05-08 13:18:23Z

0

Try this instead

$('#main').find('div:eq(0)').css('display','none');
$('#main').children('div:eq(0)').replaceWith($('#xyz'));

By specifing $('#xyz').html() you will only get the contents of the div.

For more info on replaceWith see jQuery docs

edited May 8, 2013 at 13:18

answered May 8, 2013 at 13:10

Colin Bacon

15.6k8 gold badges56 silver badges76 bronze badges

2 Comments

Debjeet Das Over a year ago

this takes the html content that is inside the <div id="xyz">, but i need it including the line <div id="xyz">

Colin Bacon Over a year ago

This will also take the div #xyz, it is the .html() that takes the contents

Collectives™ on Stack Overflow

I need to replace a div with another div using jQuery

6 Answers 6

Comments

Comments

Comments

Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related