使用 JavaScript 更新元素中的输入值-js教程-PHP中文网

使用 JavaScript 更新元素中的输入值

DDD

发布： 2025-10-12 12:17:25

原创

658人浏览过

使用 javascript 更新元素中的输入值

本文档旨在指导开发者如何使用 JavaScript 动态更新 HTML 元素中的输入值，并提供两种实现方法：直接更新和利用表单。此外，还介绍了如何使用 LocalStorage 持久化存储消息，以便在页面刷新后保留数据。

方法一：直接更新元素

这种方法直接获取输入元素的值，并在点击事件发生时，将这些值添加到新的元素中。

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>

登录后复制

CSS 样式：

新CG儿

数字视觉分享平台 | AE模板_视频素材

147

查看详情

立即学习“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', `
    <div class="message-item">
      <h3>${name.value}</h3>
      <p>${message.value}</p>
    </div>
  `);
  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 结构：

<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>

登录后复制

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', `
    <div class="message-item">
      <h3>${formElements.name.value}</h3>
      <p>${formElements.message.value}</p>
    </div>
  `);
  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 }) => `
  <div class="message-item">
    <h3>${name}</h3>
    <p>${message}</p>
  </div>
`;

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 中。