how to replace div2 with other div1 at exact same position of div1 in js or jquery

Question

I have two div in html, clicking on a button should replace a current div with other div but at the exact same place of current div

 .team-intro { margin-top:38%; height:250px; background-color:#7BD2FF; /*background-image:url('images/backgrounds/download.jpg');*/ background-size:contain; font-weight: bold; font-family: Roboto; font-size: 1.5em; border-top: 1px solid #cdcdcd; border-bottom: 1px solid #cdcdcd; } .team-intro p{ margin-left:27%; margin-top: 3%; font-size: 1.5em; color:#ffffff; font-weight:bolder; } .team-btn{ /*border:2px solid #3aa3e3;*/ border:2px solid #ffffff; border-radius: 0.25rem; padding: 14px 32px 16px; position: absolute; /*color:#3aa3e3;*/ color:#ffffff; margin-top: 1%; background-color:#3aa3e3; cursor: pointer; display: inline-block; left:42%; font-weight: bold; font-family: Roboto; font-size: 1.22em; } .team-btn:hover{ background-color:#7BD2FF; color: #fff; font-weight: bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="team-intro"> <p>XXXXX is a Free to use, Invite your team and get started today</p> </div> <div class="team-btn">Invite Now</div> <div calss="team-invite" style="display:none;"> <p>Invie by Email</p> <input type='email' id="inviteEmail" required placeholder='Email' size="70"><br> </div> <!-- begin snippet: js hide: false console: true babel: false --> 

I want to replace div class team-intro with div team-invite but in exact position of team-intro p where a Email address text box will appear

Answer 1

Your code isn't moving the DIV with class="2" , it's creating a new DIV with that class. But it doesn't contain anything.

If you want to move the existing DIV, you need to use a selector, not HTML. But when you replace it, it still has display:none; style, so you won't see it unless you also call .show()

 $(function() { $("#btnClick").click(function(e) { e.preventDefault(); $('.1').replaceWith($('.2').show()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="1"> My Content 1 </div> <div class="2" style="display:none;"> My Dynamic Content </div> <button id="btnClick">Click me!</button> 

Answer 2

The spelling of class is wrong on the team-invite div. Change the spelling and then call the following on button click

$('.team-intro').replaceWith($(".team-invite").clone().show())

Answer 3

If you are using jQuery, what about the .html() function?

When you call .html(TEXT) on a selector, it inserts the passed TEXT in argument inside the selector. When you simply call .html() on a selector, you get its inner content.

Knowing that, you can combine both:

Documentation

 $(function() { $("#btnClick").click(function(e) { e.preventDefault(); $('.1').html($('#myHiddenDiv').html()); }); }); 

 <div class="1"> My Content 1 </div> <div id="myHiddenDiv" class="2" style="display:none;"> My Dynamic Content </div> <button id="btnClick">Click me!</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 4

Set the display of the second div as block to show it.

$(".2").css("display", "block");

 $(function() { $("#btnClick").click(function(e) { e.preventDefault(); $('.1').replaceWith('<div class="2"></div>'); $(".2").css("display", "block"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="1"> My Content 1 </div> <div class="2" style="display:none;"> My Dynamic Content </div> <button id="btnClick">Click me!</button> 

Answer 5

This will work for You. It just uses hide and show functions of jquery:-

 $(function() { $("#btnClick").click(function(e) { e.preventDefault(); $('.1').hide(); $('.2').show(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="1"> My Content 1 </div> <div class="2" style="display:none;"> My Dynamic Content </div> <button id="btnClick">Click me!</button> 

Answer 6

Try this :

 $(function() { $("#btnClick").click(function(e) { e.preventDefault(); $("div.1").replaceWith('<div class="2">My Dynamic Content</div>'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="1"> My Content 1 </div> <button id="btnClick">Click me!</button>