本文旨在指导开发者如何使用 JavaScript 动态更新 HTML 元素的内容，重点讲解如何获取输入值并将其添加到新创建的元素中，并提供使用表单和本地存储的更佳实践方案，以实现更高效和用户友好的交互体验。
动态添加包含输入值的元素
本节介绍如何使用 JavaScript 获取输入框中的值，并将其动态添加到页面上的新元素中。这在创建评论区、消息列表等动态内容时非常有用。
HTML 结构
首先，我们需要一个包含输入框和按钮的 HTML 结构，以及一个用于显示动态添加元素的容器。
立即学习“Java免费学习笔记（深入）”；
JavaScript 代码
以下 JavaScript 代码实现了获取输入值并动态添加元素的功能。
const nameInput = document.querySelector('.name'), messageInput = document.querySelector('.message'), btn = document.getElementById('button'), div = document.querySelector('.items');const handleAdd = (e) => { div.insertAdjacentHTML('beforeend', ` ${nameInput.value}
${messageInput.value}
`); nameInput.value = ''; // 清空姓名输入框 messageInput.value = ''; // 清空消息输入框};btn.addEventListener('click', handleAdd);
代码解释
获取元素引用： 使用 document.querySelector 和 document.getElementById 获取输入框、按钮和容器的引用。添加事件监听器： 为按钮添加 click 事件监听器，当按钮被点击时，执行 handleAdd 函数。创建新元素： handleAdd 函数使用 insertAdjacentHTML 方法将包含输入值的新 HTML 字符串添加到容器中。清空输入框： 添加元素后，清空输入框的值，以便用户输入新的内容。
CSS 样式 (可选)
以下 CSS 样式用于美化页面。
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;}
注意事项
确保正确获取了所有元素的引用。使用 insertAdjacentHTML 方法可以方便地将 HTML 字符串添加到容器中。添加元素后，清空输入框的值，提供更好的用户体验。
使用表单优化用户体验
使用表单可以提供更好的用户体验，例如自动表单验证、Enter 键支持等。
HTML 结构
JavaScript 代码
const handleAdd = (e) => { e.preventDefault(); // 阻止页面跳转 const form = e.target, formElements = form.elements, parent = form.closest('.msg'), items = parent.querySelector('.items'); items.insertAdjacentHTML('beforeend', ` ${formElements.name.value}
${formElements.message.value}
`); formElements.name.value = ''; // 清空姓名输入框 formElements.message.value = ''; // 清空消息输入框 formElements.name.focus();};document.forms.namedItem('new-msg') .addEventListener('submit', handleAdd);
代码解释
阻止默认行为： e.preventDefault() 阻止表单提交的默认行为，即页面跳转。获取表单元素： 通过 e.target.elements 获取表单中的所有元素。添加元素： 使用 insertAdjacentHTML 方法将包含输入值的新 HTML 字符串添加到容器中。清空输入框并聚焦： 添加元素后，清空输入框的值，并将焦点设置到姓名输入框，方便用户继续输入。添加 submit 事件监听器： 为表单添加 submit 事件监听器，当表单被提交时（例如按下 Enter 键），执行 handleAdd 函数。
CSS 样式 (可选)
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;}
优势
自动表单验证： 可以使用 HTML5 的表单验证属性，例如 required，来确保用户输入有效的数据。Enter 键支持： 用户可以按下 Enter 键来提交表单，更加方便快捷。代码更简洁： 使用表单可以更方便地获取表单元素，代码更简洁易懂。
使用 LocalStorage 持久化数据
如果需要持久化存储用户输入的数据，可以使用 LocalStorage。
JavaScript 代码
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 }) => ` ${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 = ""; // 清空姓名输入框 form.elements.message.value = ""; // 清空消息输入框 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();
代码解释
定义常量： MESSAGES_KEY 用于存储消息的键名。main 函数： 在页面加载时执行，用于恢复所有消息并添加事件监听器。saveMessage 函数： 将新的消息添加到 LocalStorage 中。insertMessage 函数： 将消息添加到页面上的容器中。messageToHtml 函数： 将消息对象转换为 HTML 字符串。handleAdd 函数： 处理表单提交事件，保存消息并添加到页面上。__retrieveAllMessages 函数： 从 LocalStorage 中获取所有消息。__saveAllMessages 函数： 将所有消息保存到 LocalStorage 中。
使用方法
将以上代码添加到 HTML 文件中。在 main() 函数中调用 __retrieveAllMessages() 函数，从 LocalStorage 中获取所有消息。使用 __saveAllMessages() 函数将新的消息保存到 LocalStorage 中。
注意事项
LocalStorage 只能存储字符串，因此需要使用 JSON.stringify() 和 JSON.parse() 函数来序列化和反序列化数据。LocalStorage 存储的数据是永久性的，除非手动删除，否则会一直存在。LocalStorage 的容量有限，一般为 5MB 或 10MB，因此不适合存储大量数据。
总结
本文介绍了如何使用 JavaScript 动态更新 HTML 元素的内容，并提供了使用表单和 LocalStorage 的更佳实践方案。通过学习本文，开发者可以掌握动态添加元素、优化用户体验和持久化存储数据的技能，从而构建更强大和用户友好的 Web 应用程序。在实际开发中，可以根据具体需求选择合适的方案，并结合其他技术，例如 AJAX、WebSockets 等，来实现更复杂的功能。
以上就是JavaScript动态更新元素内容教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1528800.html
微信扫一扫 
支付宝扫一扫 
