Javascript 如何完全更改div onclick的内容？

我只是开始钻研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>

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

Javascript:

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

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

函数myproblem（）{
document.getElementById（“函数”）.html（'
');
}

我想用来更改html的按钮包含在正在更改的div中。在我将myproblem（）代码写入js文件之前，该div中还有其他onclick函数工作正常。有了这段代码，我的js就无法正常工作了

这是一个本地托管的页面，它不会联机

我假设我需要使用jQuery来实现这一点，但我不知道如何实现

谢谢，

使用JavaScript中的方法：

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

使用JavaScript中的方法：

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

函数myproblem（x）{//x可以是“temp01”或“temp02”
$（“.functions”）.html（“”）；
$（“+x）.clone（）.attr（“id”，“functions”）.show（）.appendTo（“.functions”）；
}

函数myproblem（x）{//x可以是“temp01”或“temp02”
$（“.functions”）.html（“”）；
$（“+x）.clone（）.attr（“id”，“functions”）.show（）.appendTo（“.functions”）；
}

jQuery是一个javascript库，这意味着它只能做javascript能做的事情。所以说我需要使用jQuery，因为这是唯一的方法，这是不正确的。您可以检查浏览器控制台中的错误并进行一些故障排除。jQuery是一个javascript库，这意味着它只能做javascript所能做的事情。所以说我需要使用jQuery，因为这是唯一的方法，这是不正确的。您可以检查浏览器控制台中的错误并进行一些故障排除。另请参见和。顺便提一下，

innerHTML

不接受参数（括号）。另一方面，jQuery的

html（）

，确实需要括号。谢谢。使用innerHTML（）JavaScript方法获得它。我花了一段时间，整个js仍然有一段时间不起作用，直到我发现它试图用换行符格式化innerHTML，这让我很困惑。一旦我纠正了这一点，你的js就工作得很好。顺便说一句，

innerHTML

不接受参数（括号）。另一方面，jQuery的

html（）

，确实需要括号。谢谢。使用innerHTML（）JavaScript方法获得它。我花了一段时间，整个js仍然有一段时间不起作用，直到我发现它试图用换行符格式化innerHTML，这让我很困惑。一旦我纠正了这一点，你的js工作得很好。