本文档旨在指导开发者如何使用 JavaScript 动态更新 HTML 元素中的输入值，并提供两种实现方法：直接更新和利用表单。此外，还介绍了如何使用 LocalStorage 持久化存储消息，以便在页面刷新后保留数据。
方法一：直接更新元素
这种方法直接获取输入元素的值，并在点击事件发生时，将这些值添加到新的元素中。
HTML 结构：
CSS 样式：
立即学习“Java免费学习笔记（深入）”；
BizPower CRM客户管理系统
下载
通过使用BizPower CRM解决方案，您的员工、生产过程及信息能够与客户保持着平稳、无间断的联络，并且能够通过以客户为焦点、创新的产品和服务；以客户为中心，更高层次的生产过程；持久有益的客户关系这三个方面创造有价值客户的领导关系。选择Bizpower CRM的原因1、灵活的数据权限和功能权限BizPower CRM 系统通过引入了灵活的数据权限和功能权限，模仿现实中协同工作的实际情况。 实现企
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 = ''; // 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 = ''; // 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 }) => `
`;
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 可以持久化存储数据。
