JavaScript 动态创建元素后瞬间消失的解决方案

花韻仙語

发布时间：2026-02-07 14:38:00

560人浏览过

来源于php中文网

原创

JavaScript 动态创建元素后瞬间消失的解决方案

动态添加的 html 元素在表单提交后立即消失，根本原因是表单默认提交行为导致页面刷新，且 `dd` 元素未正确追加文本节点。本文详解修复方法：阻止默认提交 + 修正 dom 构建逻辑。

在使用 JavaScript 动态创建并插入 DOM 元素时，若元素“闪现即逝”，通常并非代码执行失败，而是页面发生了意外刷新。本例中，问题根源有两个关键点：

✅ 1. 表单提交触发了页面重载

在

内点击时，会触发表单默认提交（GET 请求），导致整个页面刷新——所有通过 JS 动态插入的内容自然被清空。
解决方式：在事件处理函数中调用 event.preventDefault() 阻止默认行为。

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

原代码中：

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

这导致文本节点被挂载到

影谱

汉语电影AI辅助创作平台

下载

必须是

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

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

正确写法应为：

var z = document.createElement("DD");
var txt2 = document.createTextNode(textArea.value);
z.appendChild(txt2); // ✅ 文本属于 DD
x.appendChild(z);   // ✅ DD 属于 DL

✅ 完整修复后的代码示例：


  Enter Text here

⚠️ 注意事项：

始终检查父-子关系：appendChild() 的调用对象必须是目标父元素；文本节点不能直接作为
的子节点（合法子节点仅限
和

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

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

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

如何让 JavaScript 控制的元素显示/隐藏功能可重复触发？

JavaScript 中静态属性访问的正确方式：使用类名调用而非直接引用

如何正确使用 JavaScript 动态更换 div 的背景图而不失真？

如何正确使用 JavaScript 动态更换 div 的背景图片而不失真

JavaScript 中实现数字后紧跟括号的隐式乘法语法（教育用途）

相关标签:

javascript java html js 前端 node 浏览器 app ai 表单提交 Event JS 对象事件 dom input

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：如何让 jQuery 脚本仅作用于页面中特定的 <div> 或区块下一篇：如何用 jQuery 简化「展开/收起 + 复制按钮」的交互代码

作者最新文章

如何在 Go 中使用 OAuth2 正确获取 Google 用户邮箱

2026-02-07 16:59

响应式图像缩放：让图片随屏幕尺寸自适应缩放并保持相对位置

2026-02-07 17:10

AppLovin Max Banner 广告未按预期显示在底部的解决方案

2026-02-07 17:15

如何在 Vue 中持久化 Vuex 状态（如用户登录状态）以支持页面刷新后保留

2026-02-07 17:20

如何让下拉框宽度仅适配国家代码长度

2026-02-07 17:20

解决全局变量获取 DOM 元素为 null 的常见问题

2026-02-07 17:27

Java 中的线程是并发还是并行？深入解析 JVM 多线程执行模型

2026-02-07 17:44

如何正确累加多维数组中所有数值以计算总金额

2026-02-07 17:52

Windows Java 环境变量失效问题的终极解决方案

2026-02-07 17:53

前员工曝日本游戏大厂残酷现状引热议：顶尖画师也难逃流水线！

2026-02-07 17:54

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法，还有更多js正则表达式的相关文章、相关下载、相关课程，供大家免费下载体验。

516

2023.06.20

js获取当前时间

JS全称JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言，主要用于Web，常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢？php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。

307

2023.07.28

js 字符串转数组

js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

424

2023.08.03

js是什么意思

JS是JavaScript的缩写，它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言，通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果，如表单验证、页面元素操作、动画效果、数据交互等。

5490

2023.08.17

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

484

2023.09.01

js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容，供大家免费下载体验。

213

2023.09.04

Js中concat和push的区别

Js中concat和push的区别：1、concat用于将两个或多个数组合并成一个新数组，并返回这个新数组，而push用于向数组的末尾添加一个或多个元素，并返回修改后的数组的新长度；2、concat不会修改原始数组，是创建新的数组，而push会修改原数组，将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容，供大家免费下载体验。

239

2023.09.14