本文旨在指导开发者如何使用 JavaScript 动态更新 HTML 元素的内容，重点讲解如何获取输入值并将其添加到新创建的元素中，并提供使用表单和本地存储的更佳实践方案，以实现更高效和用户友好的交互体验。
动态添加包含输入值的元素
本节介绍如何使用 JavaScript 获取输入框中的值，并将其动态添加到页面上的新元素中。这在创建评论区、消息列表等动态内容时非常有用。
HTML 结构
外语教育精品课程类网站模板(带手机版)1.4.2
下载
外语教育精品课程类网站模板(带手机版)安装即用，自带人人站CMS内核，支持移动端，前端banner轮播图文本均已进行可视化配置，伪静态页面生成，支持内容模型，支持多种URL模式及模型。模板特点：1、安装即用，自带人人站CMS内核及企业站展示功能（产品，新闻，案例展示等），并可根据需要增加表单 搜索等功能（自带模板） 2、支持响应式 3、前端banner轮播图文本均已进行可视化配置 4、伪静态页面生
首先，我们需要一个包含输入框和按钮的 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 = ''; // 清空消息输入框
};
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.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 }) => `
`;
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 等，来实现更复杂的功能。
