动态创建的 `
- ` 元素在表单提交后短暂显示即消失，根本原因有两个：一是 dom 插入逻辑错误（文本节点误加到父容器而非 `
- `），二是表单默认提交行为触发页面刷新。本文将完整解析并提供可直接运行的修复方案。
在 JavaScript 中通过 appendChild() 动态插入元素时，若内容“闪现即逝”，通常并非代码执行失败，而是页面发生了意外重载或 DOM 操作存在结构性错误。结合您提供的代码，问题根源明确分为两类：
✅ 一、DOM 结构错误：文本节点未正确挂载
原代码中：
var z = document.createElement("DD"); var txt2 = document.createTextNode(textArea.value); x.appendChild(txt2); // ❌ 错误：txt2 被直接加到了 <dl> 上，而非 <dd>这导致 <dd> 元素被创建但未包含任何文本内容，而纯文本节点 txt2 被错误地作为 <dl> 的子节点插入——这不仅违反 HTML 语义（<dl> 只允许 <dt> 和 <dd> 作为直接子元素），还可能引发浏览器解析异常或渲染忽略。
✅ 正确写法应为：
立即学习“Java免费学习笔记（深入）”；
var z = document.createElement("DD"); var txt2 = document.createTextNode(textArea.value); z.appendChild(txt2); // ✅ 文本挂载到 <dd> x.appendChild(z); // ✅ 再将完整的 <dd> 加入 <dl>✅ 二、表单默认提交行为触发页面刷新
<input type="submit"> 在 <form> 内点击时，会自动提交表单并重新加载页面（即使 action 为空）。这是浏览器标准行为，会导致所有动态插入的 DOM 瞬间被清空。
✅ 必须阻止该默认行为：
function myFunction(e) { e.preventDefault(); // ✅ 关键：阻止表单提交与页面刷新 // ... 后续 DOM 创建与插入逻辑 }✅ 完整修复后的代码（含优化建议）
<html> <body> <form id="test"> <label for="text_input">Enter Text here</label><br /> <textarea id="text_input" name="text_input" rows="2" cols="50"></textarea><br /> <input type="submit" value="Submit" /> </form> <div id="results" class="container"></div> <script> const form = document.getElementById("test"); const textArea = document.getElementById("text_input"); const divResults = document.getElementById("results"); form.addEventListener("submit", function(e) { e.preventDefault(); // 阻止页面刷新 // 创建 <dl> const dl = document.createElement("DL"); // 创建 <dt> 并添加文本 const dt = document.createElement("DT"); dt.textContent = "Input"; // 推荐用 textContent 替代 createTextNode() dl.appendChild(dt); // 创建 <dd> 并添加用户输入 const dd = document.createElement("DD"); dd.textContent = textArea.value.trim() || "(empty)"; // 增强健壮性 dl.appendChild(dd); // 插入到结果区域 divResults.appendChild(dl); // （可选）清空输入框，提升用户体验 textArea.value = ""; textArea.focus(); }); </script> </body> </html>⚠️ 注意事项与最佳实践
- 永远校验表单事件：凡使用 <form> + submit，务必调用 e.preventDefault()，除非你确实需要跳转或提交。
- 优先使用 textContent：相比 createTextNode() + appendChild()，element.textContent = value 更简洁、安全且性能更优。
- 避免重复 ID 查询：如 document.getElementById("results") 在事件中多次调用，建议像示例中一样提前缓存为变量（如 divResults）。
- 处理空值与边界情况：对用户输入做 .trim() 判断，防止空白内容污染展示。
- 语义化结构：确保 <dl>/<dt>/<dd> 层级严格符合规范，有利于可访问性（a11y）和 SEO。
修复后，每次提交表单，动态生成的定义列表将稳定保留在页面中，不再闪烁消失。
