动态元素消失问题解决方法

✅ 2. DD 元素未正确承载文本内容

原代码中：

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

这导致文本节点被挂载到

根元素下，破坏了语义结构（

必须是

的直接子元素，且需包裹内容），浏览器虽可能渲染，但 DOM 结构异常，易引发不可预期行为。

正确写法应为：

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 />
  &lt;textarea id=&quot;text_input&quot; name=&quot;text_input&quot; rows=&quot;2&quot; cols=&quot;50&quot;&gt;&lt;/textarea&gt;
  <br />
  &lt;input type=&quot;submit&quot; value=&quot;Submit&quot; /&gt;
</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() 的调用对象必须是目标父元素；文本节点不能直接作为

  的子节点（合法子节点仅限

  和

  ）。

• 表单交互必防默认行为：只要不希望页面跳转或刷新，preventDefault() 是必备操作。
• 增强健壮性：可清空输入框、添加空值提示（如 || "(empty)"），或支持多次提交（避免重复插入相同内容）。

通过以上两步修正，动态生成的

列表将稳定保留在页面中，不再闪烁消失——这是前端表单 + 动态 DOM 操作的经典避坑实践。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~