动态添加的 html 元素在表单提交后立即消失，根本原因是表单默认提交行为导致页面刷新，且 `dd` 元素未正确追加文本节点。本文详解修复方法：阻止默认提交 + 修正 dom 构建逻辑。
在使用 JavaScript 动态创建并插入 DOM 元素时，若元素“闪现即逝”，通常并非代码执行失败，而是页面发生了意外刷新。本例中，问题根源有两个关键点：
✅ 1. 表单提交触发了页面重载
<input type="submit"> 在 <form> 内点击时，会触发表单默认提交（GET 请求），导致整个页面刷新——所有通过 JS 动态插入的内容自然被清空。
解决方式：在事件处理函数中调用 event.preventDefault() 阻止默认行为。
✅ 2. DD 元素未正确承载文本内容
原代码中：
var z = document.createElement("DD");
var txt2 = document.createTextNode(textArea.value);
x.appendChild(txt2); // ❌ 错误：将文本直接加到 DL 上，而非 DD这导致文本节点被挂载到 <dl> 根元素下，破坏了语义结构（<dd> 必须是 <dl> 的直接子元素，且需包裹内容），浏览器虽可能渲染，但 DOM 结构异常，易引发不可预期行为。
立即学习“Java免费学习笔记（深入）”；
正确写法应为：
var z = document.createElement("DD");
var txt2 = document.createTextNode(textArea.value);
z.appendChild(txt2); // ✅ 文本属于 DD
x.appendChild(z); // ✅ DD 属于 DL✅ 完整修复后的代码示例：
<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.appendChild(document.createTextNode("Input"));
dl.appendChild(dt);
// 创建 DD：用户输入内容
const dd = document.createElement("DD");
dd.appendChild(document.createTextNode(textArea.value || "(empty)"));
dl.appendChild(dd);
// 插入到 results 容器
divResults.appendChild(dl);
});
</script>⚠️ 注意事项：
- 始终检查父-子关系：appendChild() 的调用对象必须是目标父元素；文本节点不能直接作为 <dl> 的子节点（合法子节点仅限 <dt> 和 <dd>）。
- 表单交互必防默认行为：只要不希望页面跳转或刷新，preventDefault() 是必备操作。
- 增强健壮性：可清空输入框、添加空值提示（如 || "(empty)"），或支持多次提交（避免重复插入相同内容）。
通过以上两步修正，动态生成的 <dl> 列表将稳定保留在页面中，不再闪烁消失——这是前端表单 + 动态 DOM 操作的经典避坑实践。
