动态添加的 `

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

` 上（应先附加到 `

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

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

1. DOM 结构错误：文本节点未正确挂载
<dd> 是一个容器元素，必须显式接收其内容。原代码中：

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

这导致 <dd> 元素为空，而文本节点成为 <dl> 的非法子节点（HTML 规范要求 <dl> 的直接子节点只能是 <dt> 或 <dd>）。虽然浏览器会尝试容错渲染，但结构异常可能引发不可预期行为。

✅ 正确做法是：

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

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

var z = document.createElement("DD");
var txt2 = document.createTextNode(textArea.value);
z.appendChild(txt2); // ✅ 先将文本加入 <dd>
x.appendChild(z);    // ✅ 再将完整的 <dd> 加入 <dl>

2. 表单默认行为未阻止：页面意外刷新
<input type="submit"> 触发 <form> 提交，默认执行 GET 请求并刷新当前页面——这是元素“出现一秒后消失”的根本原因。即使 DOM 插入成功，页面刷新也会清空所有动态修改。

✅ 必须在事件处理函数中调用 event.preventDefault()：

function myFunction(e) {
  e.preventDefault(); // ✅ 阻止表单默认提交和页面刷新

  const x = document.createElement("DL");

  const y = document.createElement("DT");
  y.appendChild(document.createTextNode("Input"));
  x.appendChild(y);

  const z = document.createElement("DD");
  z.appendChild(document.createTextNode(textArea.value));
  x.appendChild(z);

  divResults.appendChild(x); // 使用已缓存的引用，更高效
}

完整修复版代码（含优化）：

<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();

      // 创建定义列表
      const dl = document.createElement("DL");

      // 创建术语项
      const dt = document.createElement("DT");
      dt.textContent = "Input"; // 更简洁：直接使用 textContent
      dl.appendChild(dt);

      // 创建定义项
      const dd = document.createElement("DD");
      dd.textContent = textArea.value || "(empty)"; // 防空值，增强健壮性
      dl.appendChild(dd);

      // 插入结果区
      divResults.appendChild(dl);
    });
  </script>
</body>
</html>

注意事项总结：

• ✅ 始终校验 DOM 层级关系：<dd> 必须包含内容，不能留空或跳过挂载；
• ✅ 表单提交、链接跳转等交互事件中，如需纯前端逻辑，务必调用 e.preventDefault()；
• ✅ 推荐使用 element.textContent 替代 createTextNode() + appendChild()，语义更清晰、代码更简洁；
• ✅ 对用户输入做基础防护（如空值提示），提升用户体验与调试效率。

遵循以上原则，即可稳定、可靠地动态渲染内容，避免“闪现即消失”的常见陷阱。