为何执行innerHTML修改操作后页面内容会立即恢复原状？

嘿，我来帮你搞清楚这个现象背后的逻辑～

核心原因：表单按钮的默认提交行为 #

你遇到的内容消失问题，本质是浏览器对表单内<button>元素的默认处理逻辑：

• 在<form>标签内的<button>，如果没有指定type属性，浏览器会默认把它识别为type="submit"——也就是“表单提交按钮”。
• 当你点击这个按钮时，浏览器会自动触发表单的提交动作：它会尝试把表单数据发送到表单的action地址（你没设置action的话，就默认提交到当前页面的URL）。
• 表单提交后，浏览器会重新加载整个页面，页面上所有DOM元素都会回到你写的HTML初始状态，所以你通过convert()函数修改的convDate内容，自然就被重置消失了。

为什么按住Ctrl点击会保留内容？ #

这是浏览器的快捷键交互逻辑：
当你按住Ctrl（Mac上是Cmd）点击按钮时，浏览器会把这个操作解析为**“在新标签页打开该元素关联的资源”**，而不是触发按钮的默认表单提交行为。这时候，原来的页面并没有被刷新，你之前通过JavaScript修改的DOM内容还留在原页面里，所以看起来内容“保留”了。

你的代码小细节 #

你的convert()函数里有一行冗余代码：

var conValue = document.getElementById('convDate').value;

<h2>元素并没有value属性，而且这个变量也没被用到——不过这和你遇到的页面刷新问题无关，只是个小细节～

（如果你想验证这个原理，只需要给按钮加上type="button"，它就不会触发表单提交了，修改后的内容会一直保留，但你说不需要帮忙完成应用，所以这只是个验证小技巧😉）

内容的提问来源于stack exchange，提问作者user17949142