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

动态添加的 `

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

` 上（应先附加到 `

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

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

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

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

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

这导致

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

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

的直接子节点只能是

或

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

✅ 正确做法是：

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

var z = document.createElement("DD");
var txt2 = document.createTextNode(textArea.value);
z.appendChild(txt2); // ✅ 先将文本加入 

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

2. 表单默认行为未阻止：页面意外刷新
触发

DecoHack

DecoHack是一个专注分享产品设计、开发、运营与推广的博客周刊

下载

提交，默认执行 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); // 使用已缓存的引用，更高效
}

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

  
    Enter Text here

    

    
  

  


  

注意事项总结：

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

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