点击按钮后段落内容被覆盖的原因？附JavaScript代码示例
2026-5-28
问题：点击按钮后id为show的段落原内容立即被覆盖的原因分析
先看你贴的完整代码：
<html> <head> <script> function func_1() { document.getElementById("show").innerHTML = "Hello World"; } </script> </head> <body> <h1>First</h1> <button onclick="func_1()">Click here </button> <p id="show"> Second</p> </body> </html>
核心原因拆解
innerHTML的本质特性：innerHTML是DOM元素的核心属性之一，它的作用是直接替换目标元素内部的所有HTML内容——不是在原有内容后追加，而是完全覆盖。当你给它赋值新字符串时，浏览器会立刻清空该元素原来的所有子节点（包括文本、嵌套标签等），然后把新内容渲染进去。- 同步执行的事件逻辑：按钮的
onclick事件绑定了func_1函数，当你点击按钮的瞬间，这个函数会同步、立即执行——没有任何异步等待或延迟机制。浏览器会马上执行document.getElementById("show").innerHTML = "Hello World";这行代码，瞬间完成内容替换，所以你会看到原内容立刻消失，被新文本取代。
如果想要实现追加内容而非覆盖的效果，你可以改成document.getElementById("show").innerHTML += " Hello World";，或者使用appendChild这类更严谨的DOM操作方法。
内容的提问来源于stack exchange，提问作者NIMIT AGRAWAL
相关产品推荐
相关产品推荐
