动态创建的 `

` 元素在表单提交后短暂显示即消失，根本原因有两个：一是 dom 插入逻辑错误（文本节点误加到父容器而非 `

`），二是表单默认提交行为触发页面刷新。本文将完整解析并提供可直接运行的修复方案。

在 JavaScript 中通过 appendChild() 动态插入元素时，若内容“闪现即逝”，通常并非代码执行失败，而是页面发生了意外重载或 DOM 操作存在结构性错误。结合您提供的代码，问题根源明确分为两类：

✅ 一、DOM 结构错误：文本节点未正确挂载

原代码中：

var z = document.createElement("DD");
var txt2 = document.createTextNode(textArea.value);
x.appendChild(txt2); // ❌ 错误：txt2 被直接加到了 

上，而非

这导致

元素被创建但未包含任何文本内容，而纯文本节点 txt2 被错误地作为

的子节点插入——这不仅违反 HTML 语义（

只允许

和

作为直接子元素），还可能引发浏览器解析异常或渲染忽略。

✅ 正确写法应为：

Seo Reporter

对URL进行SEO因素审计并生成可操作的Markdown报告。适用于分析、检查或审计网页SEO表现，涵盖标题等关键指标。

下载

var z = document.createElement("DD");
var txt2 = document.createTextNode(textArea.value);
z.appendChild(txt2); // ✅ 文本挂载到 

x.appendChild(z); // ✅ 再将完整的

加入

✅ 二、表单默认提交行为触发页面刷新

在

内点击时，会自动提交表单并重新加载页面（即使 action 为空）。这是浏览器标准行为，会导致所有动态插入的 DOM 瞬间被清空。

✅ 必须阻止该默认行为：

function myFunction(e) {
  e.preventDefault(); // ✅ 关键：阻止表单提交与页面刷新
  // ... 后续 DOM 创建与插入逻辑
}

✅ 完整修复后的代码（含优化建议）

Enter Text here

<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>

⚠️ 注意事项与最佳实践

• 永远校验表单事件：凡使用
  + submit，务必调用 e.preventDefault()，除非你确实需要跳转或提交。
• 优先使用 textContent：相比 createTextNode() + appendChild()，element.textContent = value 更简洁、安全且性能更优。
• 避免重复 ID 查询：如 document.getElementById("results") 在事件中多次调用，建议像示例中一样提前缓存为变量（如 divResults）。
• 处理空值与边界情况：对用户输入做 .trim() 判断，防止空白内容污染展示。
• 语义化结构：确保

  /

  /

  层级严格符合规范，有利于可访问性（a11y）和 SEO。

修复后，每次提交表单，动态生成的定义列表将稳定保留在页面中，不再闪烁消失。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南