本文档旨在指导开发者如何使用 JavaScript 动态更新 HTML 元素中的输入值，并提供两种实现方法：直接更新和利用表单。此外，还介绍了如何使用 LocalStorage 持久化存储消息，以便在页面刷新后保留数据。
方法一：直接更新元素
这种方法直接获取输入元素的值，并在点击事件发生时，将这些值添加到新的元素中。
HTML 结构：
CSS 样式：
立即学习“Java免费学习笔记（深入）”；
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;}
JavaScript 代码：
const name = document.querySelector('.name'), message = document.querySelector('.message'), btn = document.getElementById('button'), div = document.querySelector('.items');const handleAdd = (e) => { div.insertAdjacentHTML('beforeend', ` ${name.value}
${message.value}
`); name.value = ''; // Clear name message.value = ''; // Clear message};btn.addEventListener('click', handleAdd);
代码解释：
首先，获取需要的 DOM 元素：name 输入框，message 输入框，button 按钮，以及 items 容器。handleAdd 函数：使用 insertAdjacentHTML 方法在 items 容器的末尾插入一个新的 div 元素，该元素包含 name 和 message 的值。清空 name 和 message 输入框的值，以便用户输入新的内容。为 button 按钮添加点击事件监听器，当点击按钮时，执行 handleAdd 函数。
注意事项：
确保在 JavaScript 代码中正确获取了 DOM 元素。使用 insertAdjacentHTML 方法可以方便地插入 HTML 代码。在添加完元素后，清空输入框的值，可以提高用户体验。
方法二：使用表单
使用表单可以更好地利用浏览器提供的功能，例如表单验证、提交和重置。
HTML 结构：
CSS 样式：
立即学习“Java免费学习笔记（深入）”；
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;}
JavaScript 代码：
const handleAdd = (e) => { e.preventDefault(); // Prevent page from navigating 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 = ''; // Clear name formElements.message.value = ''; // Clear message formElements.name.focus();};document.forms.namedItem('new-msg') .addEventListener('submit', handleAdd);
代码解释：
handleAdd 函数：e.preventDefault() 阻止表单的默认提交行为，防止页面刷新。获取表单元素：form，formElements，parent，items。使用 insertAdjacentHTML 方法在 items 容器的末尾插入一个新的 div 元素，该元素包含 name 和 message 的值。清空 name 和 message 输入框的值。使用 formElements.name.focus() 将焦点设置到 name 输入框，方便用户继续输入。使用 document.forms.namedItem(‘new-msg’) 获取名为 new-msg 的表单，并为其添加 submit 事件监听器，当表单提交时，执行 handleAdd 函数。
注意事项：
使用表单可以利用浏览器提供的验证功能，例如 required 属性。e.preventDefault() 阻止表单的默认提交行为非常重要。使用 formElements.name.focus() 可以提高用户体验。
方法三：使用 LocalStorage 持久化存储
如果需要在页面刷新后保留消息，可以使用 LocalStorage。
JavaScript 代码：
const MESSAGES_KEY = "messages";const main = () => { // Restore all messages const messageContainer = document.querySelector(".items"); __retrieveAllMessages().forEach((message) => { insertMessage(message, messageContainer); }); // Add event listener 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(); // Prevent page from navigating 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 = ""; // Clear name form.elements.message.value = ""; // Clear 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();
代码解释：
MESSAGES_KEY 定义了 LocalStorage 中存储消息的键名。main 函数：在页面加载时，从 LocalStorage 中恢复所有消息，并将其添加到 items 容器中。为表单添加 submit 事件监听器。saveMessage 函数：将新的消息添加到 LocalStorage 中。insertMessage 函数：将消息添加到 items 容器中。messageToHtml 函数：将消息对象转换为 HTML 字符串。handleAdd 函数：阻止表单的默认提交行为。获取表单元素的值，并创建一个消息对象。将消息保存到 LocalStorage 中。将消息添加到 items 容器中。清空输入框的值，并将焦点设置到 name 输入框。__retrieveAllMessages 函数：从 LocalStorage 中获取所有消息。__saveAllMessages 函数：将所有消息保存到 LocalStorage 中。
注意事项：
LocalStorage 存储的数据是字符串，因此需要使用 JSON.stringify 和 JSON.parse 方法进行转换。LocalStorage 存储的数据大小有限制，一般为 5MB。LocalStorage 存储的数据是持久化的，即使关闭浏览器，数据仍然存在。
总结：
本文档介绍了三种使用 JavaScript 更新 HTML 元素中输入值的方法，并提供了详细的代码示例和解释。开发者可以根据自己的需求选择合适的方法。使用表单可以更好地利用浏览器提供的功能，而使用 LocalStorage 可以持久化存储数据。
以上就是使用 JavaScript 更新元素中的输入值的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1528881.html
微信扫一扫 
支付宝扫一扫 
