本文详细讲解了如何使用 JavaScript 动态更新 HTML 元素的内容，重点是如何正确获取输入框的值并将其添加到新创建的元素中。同时，也介绍如何利用表单简化代码，以及如何使用 localStorage 持久化存储数据，并提供相应的代码示例和最佳实践。
动态更新元素内容的基础方法
核心问题在于如何正确获取输入框（input）的值，并将其动态添加到新创建的 HTML 元素中。以下是一个基础的实现方法：
<div class="msg">
<div class="items"></div>
<div class="input">
<input type="text" class="name" placeholder="Name">
<input type="text" class="message" placeholder="Message">
<button id="button">Submit</button>
<button type="reset">Reset</button>
</div>
</div>
<script>
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 = `
<h3>${nameInput.value}</h3>
<p>${messageInput.value}</p>
`;
item.className = "message-item";
item.innerHTML = inner;
div.append(item);
// 清空输入框
nameInput.value = '';
messageInput.value = '';
});
</script>
<style>
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;
}
</style>关键点：
- 获取元素引用： 使用 document.querySelector 获取输入框和容器元素的引用，确保获取的是元素本身，而不是元素的值。
- 获取输入值： 在 addEventListener 中，通过 .value 属性获取输入框的当前值。
- 创建和添加元素： 使用 document.createElement 创建新的 div 元素，并使用模板字符串将输入值插入到元素的 innerHTML 中。
- 清空输入框： 在添加元素后，将输入框的值设置为空字符串，以便用户可以输入新的内容。
使用表单简化代码
使用 HTML 表单可以更优雅地处理用户输入，并利用表单的内置功能，例如验证和重置。
立即学习“Java免费学习笔记（深入）”；
<div class="msg">
<div class="items"></div>
<form id="new-msg" autocomplete="off">
<input type="text" name="name" placeholder="Name" required>
<input type="text" name="message" placeholder="Message">
<button type="submit" class="form-btn">Submit</button>
<button type="reset" class="form-btn">Reset</button>
</form>
</div>
<script>
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', `
<div class="message-item">
<h3>${formElements.name.value}</h3>
<p>${formElements.message.value}</p>
</div>
`);
formElements.name.value = ''; // 清空 name
formElements.message.value = ''; // 清空 message
formElements.name.focus(); // 将焦点设置回 name 输入框
};
document.forms.namedItem('new-msg')
.addEventListener('submit', handleAdd);
</script>
<style>
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;
}
</style>优势：
- e.preventDefault()： 阻止表单的默认提交行为，防止页面刷新。
- form.elements： 可以通过 form.elements.name 直接访问表单中的元素，代码更简洁。
- autocomplete="off"： 关闭浏览器的自动完成功能，避免干扰用户输入。
- <button type="submit">： 使用 submit 类型的按钮可以触发表单的提交事件，同时支持键盘上的 Enter 键。
- <input required>： 利用 HTML5 的 required 属性，可以进行简单的表单验证。
- formElements.name.focus()： 提交后，将焦点设置回 name 输入框，提高用户体验。
使用 LocalStorage 持久化存储数据
如果需要保存用户输入的数据，可以使用 localStorage。 以下是一个使用 localStorage 存储和检索消息的示例：
<div class="msg">
<div class="items"></div>
<form id="new-msg" autocomplete="off">
<input type="text" name="name" placeholder="Name" required>
<input type="text" name="message" placeholder="Message">
<button type="submit" class="form-btn">Submit</button>
<button type="reset" class="form-btn">Reset</button>
</form>
</div>
<script>
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
}) => `
<div class="message-item">
<h3>${name}</h3>
<p>${message}</p>
</div>
`;
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();
</script>
<style>
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;
}
</style>关键点：
- 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 应用。
