为什么表单元素中的Javascript失败？

Question

我最近在对JS应用程序进行故障排除时，将我的前方撞到墙上;它归结为这样的事情：将js放在一个形式的html元素中导致它失败/立即反转。这是为什么？

失败：

<div id="p1">Hello World!</div>
<form>
<button onclick='document.getElementById("p1").innerHTML="New text!";'>Change me</button
</form>

WORKS：

<div id="p1">Hello World!</div>
<button onclick='document.getElementById("p1").innerHTML="New text!";'>Change me</button

Answer 1

尝试

<div id="p1">Hello World!</div>
<form method="post" onsubmit="return false;">
<button onclick='document.getElementById("p1").innerHTML="New text!";'>Change me</button>
</form>

Fiddle