Javascript 如何删除一个div并在其位置加载新div？

我需要单击一个按钮，删除一个div，然后在它的位置加载一个新的div。两个div都包含一点html和一个脚本

使用下面的remove/show方法，div1可以完美地加载，但在单击按钮之后，div2将替换div1，但只加载来自div2的html。由于某些原因，未加载div2脚本

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

div1内容
第2部分内容
按钮
$（'#按钮'）。在（'单击'，函数（）上）{
$（'#div1'）。删除（）；
$（'#div2'）.show（）；
});

有没有办法删除div1，然后重新加载新的div2，而不仅仅是取消隐藏div2？

试试看

var $origin = $('#div1'),
    replacementSrc = '/path/to/div2.html',
    replacementScriptsSrc = '/path/to/div2.js';

$('#button').on('click', function () {
    $.load(replacementSrc, function (html) {
        $origin.replaceWith(html);
        $.getScript(replacementScriptsSrc/*, function () { doSomething(); }*/);
    });
});

---

您可以尝试以下方法：

$('#button').on('click', function() {
    $('#div1').html('div 2 contents');
});

在本例中，您不需要上面示例中的行。

尝试此代码

$( document ).ready(function() {
      $('#button').on('click', function() {
            $('#div1').html($('#div2').html());
      });
});

问题在于你的剧本。实际上，脚本已加载到

div1

中，但随后脚本抛出此错误

Uncaught ReferenceError: jwplayer is not defined 

这将退出。因此，不会加载任何脚本

---

您正在处理的是这样的事情吗

div{
height:100px;
width:100px;
margin:10px;
}

.b{
background:green;
}

.c{
display:none;
background:blue;
}

HTML

<div class="b">
<script>
$(document).ready(function(){
$('#button').click(function(){
$('.c').show();
$('.b').remove();
})  
});

</script>
</div>
<div class="c">
<script>
$(document).ready(function(){
$('.c').click(function(){
$(this).css('background','red');
})
});
</script>
</div>
<input type="button" id="button">

$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
$（'.c'）.show（）；
$（'.b'）.remove（）；
})  
});
$（文档）.ready（函数（）{
$（'.c'）。单击（函数（）{
$（this.css（'background'，'red'）；
})
});

---

这对我很有用。

当您显示div2时，您可能想调用该脚本方法，您可以尝试

replaceWith（）

，问题到底出在哪里，与div 2的位置一样？您是否在外部文件或标记中提供了脚本？div 2脚本在哪里？出于某些原因，这根本没有替换它抱歉，我发布了第一个解决方案，因为错误请参见此处。。。尝试用另一个div2内容替换1视频播放器不会出现在此示例中是否检查演示链接？是，但它不会替换内容，div1内容消失，而div2内容不会出现在其位置检查此项。我可以看到内容发生了变化。你在做什么不同的事吗？或者你还期待其他东西吗？好的，抱歉，脚本可以工作，但仍然无法从div2加载脚本。请看这里：