本文详细讲解了如何使用 JavaScript 动态更新 HTML 元素的内容，重点是如何正确获取输入框的值并将其添加到新创建的元素中。同时，也介绍如何利用表单简化代码，以及如何使用 localStorage 持久化存储数据，并提供相应的代码示例和最佳实践。
动态更新元素内容的基础方法
核心问题在于如何正确获取输入框（input）的值，并将其动态添加到新创建的 HTML 元素中。以下是一个基础的实现方法：
const nameInput = document.querySelector('.name'); const messageInput = document.querySelector('.message'); const btn = document.getElementById('button'); const div = document.querySelector('.items'); btn.addEventListener('click', () => { let item = document.createElement('div'); let inner = `${nameInput.value}
${messageInput.value}
`; item.className = "message-item"; item.innerHTML = inner; div.append(item); // 清空输入框 nameInput.value = ''; messageInput.value = ''; }); html, body { padding: 0; margin: 0; } .msg { padding: 2em; margin: 2em; border-radius: 2vh; height: 70vh; display: flex; align-items: center; justify-content: left; flex-direction: column; background-color: #1e90ff; } .items { height: 65vh; overflow: scroll; color: white; width: 100%; overflow-x: hidden; margin: 10px; } input { padding: 10px; border: none; border-radius: 8px; outline: none; font-size: 1em; } #button { padding: 10px 20px; border-radius: 8px; border: none; font-size: 1em; } .button { padding: 10px 20px; border-radius: 8px; border: none; font-size: 1em; } .message-item { background-color: black; padding: 1em; border-radius: 8px; margin: 3px; }
关键点：
立即学习“Java免费学习笔记（深入）”；
获取元素引用： 使用 document.querySelector 获取输入框和容器元素的引用，确保获取的是元素本身，而不是元素的值。获取输入值： 在 addEventListener 中，通过 .value 属性获取输入框的当前值。创建和添加元素： 使用 document.createElement 创建新的 div 元素，并使用模板字符串将输入值插入到元素的 innerHTML 中。清空输入框： 在添加元素后，将输入框的值设置为空字符串，以便用户可以输入新的内容。
使用表单简化代码
使用 HTML 表单可以更优雅地处理用户输入，并利用表单的内置功能，例如验证和重置。
const handleAdd = (e) => { e.preventDefault(); // 阻止表单默认提交行为 const form = e.target; const formElements = form.elements; const parent = form.closest('.msg'); const items = parent.querySelector('.items'); items.insertAdjacentHTML('beforeend', ``); formElements.name.value = ''; // 清空 name formElements.message.value = ''; // 清空 message formElements.name.focus(); // 将焦点设置回 name 输入框 }; document.forms.namedItem('new-msg') .addEventListener('submit', handleAdd); html, body { padding: 0; margin: 0; } .msg { padding: 2em; margin: 2em; border-radius: 2vh; height: 70vh; display: flex; align-items: center; justify-content: left; flex-direction: column; background-color: #1e90ff; } .items { height: 65vh; overflow: scroll; color: white; width: 100%; overflow-x: hidden; margin: 10px; } input { padding: 10px; border: none; border-radius: 8px; outline: none; font-size: 1em; } .form-btn { padding: 10px 20px; border-radius: 8px; border: none; font-size: 1em; } .message-item { background-color: black; padding: 1em; border-radius: 8px; margin: 3px; }${formElements.name.value}
${formElements.message.value}
优势：
e.preventDefault()： 阻止表单的默认提交行为，防止页面刷新。form.elements： 可以通过 form.elements.name 直接访问表单中的元素，代码更简洁。autocomplete=”off”： 关闭浏览器的自动完成功能，避免干扰用户输入。 使用 submit 类型的按钮可以触发表单的提交事件，同时支持键盘上的 Enter 键。： 利用 HTML5 的 required 属性，可以进行简单的表单验证。formElements.name.focus()： 提交后，将焦点设置回 name 输入框，提高用户体验。
使用 LocalStorage 持久化存储数据
如果需要保存用户输入的数据，可以使用 localStorage。 以下是一个使用 localStorage 存储和检索消息的示例：
const MESSAGES_KEY = "messages"; const main = () => { // 恢复所有消息 const messageContainer = document.querySelector(".items"); __retrieveAllMessages().forEach((message) => { insertMessage(message, messageContainer); }); // 添加事件监听器 document.forms.namedItem("new-msg").addEventListener("submit", handleAdd); }; const saveMessage = (message) => { __saveAllMessages(__retrieveAllMessages().concat(message)); }; const insertMessage = (message, container) => { container.insertAdjacentHTML("beforeend", messageToHtml(message)); }; const messageToHtml = ({ name, message }) => ``; const handleAdd = (e) => { e.preventDefault(); // 阻止页面导航 const form = e.target, message = { name: form.elements.name.value, message: form.elements.message.value, }; saveMessage(message); insertMessage(message, form.closest(".msg").querySelector(".items")); form.elements.name.value = ""; // 清除 name form.elements.message.value = ""; // 清除 message form.elements.name.focus(); }; const __retrieveAllMessages = () => { return JSON.parse(localStorage.getItem(MESSAGES_KEY) ?? "[]"); }; const __saveAllMessages = (messages = []) => { return localStorage.setItem(MESSAGES_KEY, JSON.stringify(messages)); }; main(); html, body { padding: 0; margin: 0; } .msg { padding: 2em; margin: 2em; border-radius: 2vh; height: 70vh; display: flex; align-items: center; justify-content: left; flex-direction: column; background-color: #1e90ff; } .items { height: 65vh; overflow: scroll; color: white; width: 100%; overflow-x: hidden; margin: 10px; } input { padding: 10px; border: none; border-radius: 8px; outline: none; font-size: 1em; } .form-btn { padding: 10px 20px; border-radius: 8px; border: none; font-size: 1em; } .message-item { background-color: black; padding: 1em; border-radius: 8px; margin: 3px; }${name}
${message}
关键点：
立即学习“Java免费学习笔记（深入）”；
MESSAGES_KEY： 定义一个常量用于存储 localStorage 中的键名。__retrieveAllMessages()： 从 localStorage 中检索所有消息，如果 localStorage 中没有数据，则返回一个空数组。__saveAllMessages()： 将所有消息保存到 localStorage 中。saveMessage()： 将新消息添加到现有的消息列表中，并保存到 localStorage 中。insertMessage()： 将消息插入到 DOM 中。main()： 在页面加载时，从 localStorage 中恢复所有消息，并添加到 DOM 中。
注意事项：
localStorage 存储的数据是字符串，因此需要使用 JSON.stringify() 将对象转换为字符串，并使用 JSON.parse() 将字符串转换为对象。localStorage 存储的数据是永久性的，除非手动清除，否则数据会一直保存在浏览器中。localStorage 存储的数据是同源的，只有相同域名、协议和端口的页面才能访问相同的数据。localStorage 的存储容量有限，通常为 5MB 或 10MB，具体取决于浏览器。
总结
本文介绍了使用 JavaScript 动态更新元素内容的几种方法，从基础的元素操作到使用表单简化代码，再到使用 localStorage 持久化存储数据。选择哪种方法取决于具体的需求和场景。希望本文能够帮助你更好地理解和应用 JavaScript，构建更动态、更交互性的 Web 应用。
以上就是JavaScript动态更新元素内容：一个逐步教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1528998.html
微信扫一扫 
支付宝扫一扫 
