JavaScript 中动态创建的 DOM 元素为何一闪而逝？-js教程

动态添加的 `

` 元素在表单提交后立即消失，根本原因有两个：一是 `dd` 文本节点错误地直接附加到了 `

` 上（应先附加到 `

`），二是表单默认提交行为触发页面刷新。修复需修正 dom 结构并调用 `event.preventdefault()` 阻止默认提交。

在 JavaScript 动态操作 DOM 时，结构合法性与事件行为控制缺一不可。你提供的代码中存在两个关键错误：

1. DOM 结构错误：文本节点未正确挂载

是一个容器元素，必须显式接收其内容。原代码中：

var txt2 = document.createTextNode(textArea.value);
x.appendChild(txt2); // ❌ 错误：将文本直接加到 <dl>，而非 <dd>

这导致

元素为空，而文本节点成为

的非法子节点（HTML 规范要求

的直接子节点只能是

或

）。虽然浏览器会尝试容错渲染，但结构异常可能引发不可预期行为。

✅ 正确做法是：

立即学习“Java免费学习笔记（深入）”；