JavaScript按钮点击修改HTML多文本时p元素消失问题解决

• 对textContent的DOM操作特性存在认知偏差：textContent赋值时会完全移除目标元素下的所有子节点，替换为传入的纯文本内容。原代码中p元素是h1的内部子节点，点击事件触发时先执行h1的textContent赋值，p节点会被直接从DOM树中删除，后续查找p元素做内容修改时，目标节点已不存在，自然无法正常显示。
• HTML结构不符合W3C嵌套规范：<p>为独立块级内容标签，不允许嵌套在<h1>标题标签内部，浏览器解析这类非标准结构时会自动调整DOM关系，进一步提高操作出错的概率。
• 代码中自定义的<table2>、<tr2>、<td2>不属于标准HTML标签，无法被浏览器识别为表格结构组件，属于冗余的非规范写法。

1. 重构HTML嵌套结构，将p元素移出h1标签，设置为h1的同级元素，符合标签嵌套规则，修正后的核心结构示例：

   <div>
       <h1 id="h1">CS 111</h1>
       <p id="p">Computer Science</p>
   </div>
   

   同时将非标准的<table2>系列标签替换为原生的<table>、<tr>、<td>标签。
2. 保持原有JS的点击修改逻辑不变即可：调整结构后，h1和p为同级独立节点，修改h1的textContent时不会对p节点产生任何影响，两个元素的内容都可以正常被修改。
   可运行的JS拆分代码：

   // ParagraphChanger.js 内容
   document.getElementById("button").onclick = function() {
       document.getElementById("h1").textContent = "Anth 200";
       document.getElementById("p").textContent = "Cultural Anthropology";
   };
   
   // SecondYear.js 内容
   document.getElementById("button2").onclick = function() {
       document.getElementById("h1").textContent = "CS 111";
       document.getElementById("p").textContent = "Computer Science";
   };
   

特殊情况说明：如果业务场景强制要求p元素放在h1内部，需要调整JS的执行顺序，先修改p的textContent，再修改h1的文本内容；但这种写法不符合HTML规范，不推荐在正式项目中使用。

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