Question

我想删除当前div并使用带按钮的onclick替换为另一个

我已尝试过以下方法，但由于新旧div都包含不同的脚本，因此无法正确加载新div中的脚本

document.getElementById("div1").style.display="block"; 
document.getElementById("div2").style.display="none";

我想最好的方法是实际删除div1并替换为div2加载一个新的？

我该怎么做？

我尝试过jquery解决方案，但我的网站似乎并不喜欢jquery。谁知道为什么？我尝试过纯javascript，但有效但不是jquery。我正在加载jquery :(

我知道我的模板很大程度上依赖于可能与jquery冲突的mootool

Answer 1

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

或者，如果您只想替换HTML

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

Answer 2

使用jquery可以更轻松地完成此操作，首先一定要将jquery include包含在head标签中。这是jquery的最新版本：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

给出这个html：

<div id="div1">div1</div>
<div id="div2">div2</div>
<button id="toggle">toggle</button>

和这个css：

#div2 { display:none; }

你可以使用这个jquery：

$("#toggle").click( function() {
    $("#div1,#div2").toggle();
});

这将在div之间来回切换，jsfiddle here> http://jsfiddle.net/WMPx7/

如果您不想切换div，可以将jquery更改为如下所示：

$("#toggle").click( function() {
    $("#div1").hide();
    $("#div2").show();
});

Answer 3

试试这个：

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

和js：

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

Answer 4

我认为你们两个div都有一个id属性并且有一些数据。

纯Javascript

function fnChangeDivContent(){
   document.getElementById("div1").innerHTML = document.getElementById("div2").innerHTML;
}

<强> HTML

<input type ="button" value = "Replace Div Content" onclick = "fnChangeDivContent()" />

可能会帮到你。

删除div并使用onclick按钮替换

4 个答案: