如何在div或js或jQuery中完全相同的位置用其他div1替换div2

Question

我在html中有两个div，单击按钮应将当前div替换为其他div，但应与当前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 --> 

我想用div team-invite代替div class team-intro ，但要在team-intro p确切位置显示电子邮件地址文本框

Answer 1

您的代码没有移动class="2"的DIV，而是使用class="2"创建了新的 DIV。 但是它不包含任何东西。

如果要移动现有的DIV，则需要使用选择器，而不是HTML。 但是当您更换它时，它仍然display:none; 样式，因此除非您也调用.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

在team-invite div上， class的拼写错误。 更改拼写，然后在按钮单击上调用以下内容

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

Answer 3

如果您使用的是jQuery，那么.html()函数呢？

在选择器上调用.html(TEXT)时，它将在选择器内部的参数中插入传递的TEXT。 当您在选择器上简单地调用.html()时，您将获得其内部内容。

知道这一点，您可以将以下两者结合起来：

文档

 $(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

将第二个div的显示设置为block以显示它。

$(".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

这将为您工作。 它只使用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

尝试这个 ：

 $(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>