JavaScript中Append Child动态元素显示一秒后消失问题排查

元素消失的原因 #

表单的submit事件默认会触发浏览器的表单提交行为，页面会随之重新加载。你动态创建的<dl>元素是在页面加载完成后添加的，页面刷新后这些动态元素会被清除，所以只显示一秒就消失了。

另外你的代码还有个小问题：创建的<dd>元素z没有被正确添加到<dl>结构中，原代码直接把文本节点加到了<dl>里，导致<dd>元素未被使用，需要修正这个结构问题。

解决方法 #

方法一：阻止表单默认提交行为 #

在submit事件处理函数中添加event.preventDefault()，阻止浏览器的默认表单提交动作，页面就不会刷新了，同时修正<dd>的结构：

function myFunction(event) {
  // 阻止表单默认提交，避免页面刷新
  event.preventDefault();
  
  var x = document.createElement("DL");

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

  var z = document.createElement("DD");
  var txt2 = document.createTextNode(textArea.value);
  z.appendChild(txt2); // 把文本节点放到<dd>里
  x.appendChild(z); // 再把<dd>加到<dl>中
  
  divResults.appendChild(x);
}

方法二：改用普通按钮替代提交按钮 #

将表单里的submit类型按钮改成普通按钮，这样就不会触发表单的默认提交行为：

修改HTML部分的按钮：

<input type="button" value="Submit" onclick="myFunction()" />

同时可以移除表单的submit事件监听（这一步可选，移除后代码更简洁）：

// 移除这一行：form.addEventListener("submit", myFunction);

内容的提问来源于stack exchange，提问作者gautam