如何彻底改变div onclick的内容?

时间:2018-05-23 16:36:16

标签: javascript jquery html

我只是开始深入研究javascript并且不知道如何使用jQuery,但我正在开发一个具有控制面板的页面。我正试图让控制面板的功能在点击它上面的按钮时改变。

这是我到目前为止所拥有的;

HTML:

<div id="functions">
  <button id="prob" onclick="myproblem()" type="button" title="prob"></button>
  <button id="button1" onclick="works1()" type="button" title="button1"></button>
  <button id="button2" onclick="works2" type="button" title="button2"></button>
</div>

使用Javascript:

function myproblem() {
document.getElementById("functions").html('
  <button id="prob" onclick="myproblem()" type="button" title="prob"></button>
  <button id="button3" onclick="works3()" type="button" title="button3"></button>
  <button id="button4" onclick="works4()" type="button" title="button4"></button>');
}

我想用来改变html的按钮包含在要更改的div中。该div中还有其他onclick函数,它们工作正常,直到我将myproblem()代码写入我的js文件。有了那段代码,我的js都没有。

这是一个本地主页,它不会在线。

我假设我需要使用jQuery来解决此问题,但我不知道如何。

谢谢,

2 个答案:

答案 0 :(得分:3)

在JavaScript中使用innerHTML()方法:

function myproblem() {
    document.getElementById("functions").innerHTML ='<button id="prob" onclick="myproblem()" type="button" title="prob"></button> <button id="button3" onclick="works3()" type="button" title="button3"></button> <button id="button4" onclick="works4()" type="button" title="button4"></button>'
}

在Jquery中,您可以使用html方法

$(".functions").html('Your html code goes here')

答案 1 :(得分:0)

<div class="temp01" style="display:none">
   <button id="prob" onclick="myproblem('temp02')" type="button" title="prob"></button>
   <button id="button1" onclick="works1()" type="button" title="button1"></button>
   <button id="button2" onclick="works2" type="button" title="button2"></button>
</div>
<div class="temp02" style="display:none">
   <button id="prob" onclick="myproblem('temp01')" type="button" title="prob"></button>
   <button id="button3" onclick="works3()" type="button" title="button3"></button>
   <button id="button4" onclick="works4()" type="button" title="button4"></button>
</div>
<div class="functions">
   <button id="prob" onclick="myproblem('temp02')" type="button" title="prob"></button>
   <button id="button1" onclick="works1()" type="button" title="button1"></button>
   <button id="button2" onclick="works2" type="button" title="button2"></button>
</div>

<script>
   function myproblem(x){   //x could be "temp01" or "temp02"
        $(".functions").html("");
        $("." + x).clone().attr("id","functions").show().appendTo(".functions");
   }
</script>