如何完全更改div onclick的內容？

Question

我只是開始研究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來實現這一目標，但是我不知道如何實現。

謝謝，

Answer 1

在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')

Answer 2

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