使用 J*aScript 更新输入值到元素_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用 J*aScript 更新输入值到元素

2025-10-12

浏览次数：次

返回列表

使用 javascript 更新输入值到元素

本文档旨在指导开发者如何使用 J*aScript 将输入框中的值动态更新到页面元素中，并提供代码示例和最佳实践。我们将探讨如何获取输入值、创建和更新元素，以及如何利用表单和本地存储优化用户体验。

动态更新元素内容

在网页开发中，经常需要根据用户的输入动态更新页面上的元素。以下是一个基础示例，演示了如何实现这一功能：

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 样式:

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

J*aScript 代码:

动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联J*aScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR*函数库的强大功能，对常用的、强大的包

525 查看详情动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

const
  nameInput = document.querySelector('.name'),
  messageInput = document.querySelector('.message'),
  btn = document.getElementById('button'),
  div = document.querySelector('.items');

const handleAdd = (e) => {
  div.insertAdjacentHTML('beforeend', `
    <div class="message-item">
      <h3>${nameInput.value}</h3>
      <p>${messageInput.value}</p>
    </div>
  `);
  nameInput.value = '';    // Clear name
  messageInput.value = ''; // Clear message
};

btn.addEventListener('click', handleAdd);

代码解释:

首先，我们获取了需要操作的 DOM 元素，包括输入框（.name 和 .message）、按钮（#button）以及用于显示内容的容器（.items）。
handleAdd 函数负责创建新的 div 元素，并将输入框中的 name 和 message 值插入到新元素中。
insertAdjacentHTML('beforeend', ...) 方法将新创建的 HTML 插入到 .items 容器的末尾。
最后，清空输入框的值，以便用户可以输入新的内容。

注意事项:

确保正确选择 DOM 元素。使用 querySelector 或 getElementById 时，要确保选择器与 HTML 结构匹配。
在插入 HTML 字符串时，注意转义特殊字符，防止 XSS 攻击。
及时清理输入框，提供更好的用户体验。

使用表单优化体验

使用表单可以利用浏览器内置的功能，例如表单验证、提交和重置。这可以简化代码并提高用户体验。

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 样式 (与上一个示例相同)

J*aScript 代码:

const handleAdd = (e) => {
  e.preventDefault(); // Prevent page from n*igating
  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);

代码解释:

通过 document.forms.namedItem('new-msg') 获取表单元素，并监听 submit 事件。
e.preventDefault() 阻止表单的默认提交行为，防止页面刷新。
通过 form.elements.name.value 和 form.elements.message.value 获取输入框的值。
formElements.name.focus() 将焦点设置回 name 输入框，方便用户继续输入。

优点:

利用表单的 required 属性进行简单的客户端验证。
支持键盘 Enter 键提交表单。
使用 reset 按钮可以方便地清空表单。

使用 LocalStorage 持久化数据

如果需要保存用户输入的数据，可以使用 localStorage。以下是一个示例，演示了如何使用 localStorage 保存和恢复消息：

HTML 结构和 CSS 样式 (与上一个示例相同)

J*aScript 代码:

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 s*eMessage = (message) => {
  __s*eAllMessages(__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 n*igating
  const form = e.target,
    message = {
      name: form.elements.name.value,
      message: form.elements.message.value,
    };
  s*eMessage(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 __s*eAllMessages = (messages = []) => {
  return localStorage.setItem(MESSAGES_KEY, JSON.stringify(messages));
};

main();

代码解释:

MESSAGES_KEY 定义了用于存储消息的 localStorage 键。
main 函数在页面加载时执行，从 localStorage 中恢复所有消息，并添加到页面上。
s*eMessage 函数将新的消息添加到 localStorage 中。
__retrieveAllMessages 和 __s*eAllMessages 函数负责从 localStorage 中读取和写入消息数据。注意使用了 JSON.parse 和 JSON.stringify 进行序列化和反序列化。
handleAdd 函数与之前的示例类似，但现在会将消息保存到 localStorage 中。

注意事项:

localStorage 只能存储字符串数据，因此需要使用 JSON.stringify 和 JSON.parse 对复杂数据结构进行序列化和反序列化。
localStorage 的存储空间有限，不适合存储大量数据。

总结

本文档介绍了如何使用 J*aScript 将输入值动态更新到页面元素中，并提供了多种方法来优化用户体验。通过合理使用表单和 localStorage，可以创建更强大、更友好的 Web 应用程序。记住，代码的可读性和维护性同样重要，编写清晰、简洁的代码是每个开发者的责任。

以上就是使用 J*aScript 更新输入值到元素的详细内容，更多请关注其它相关文章！

# javascript # css # 输入框 # 表单 # red # overflow # ai # 浏览器 # json # js # html # java # 保定网站推广哪个好 # 温州湾新区网站建设招标 # 关于建设旅游网站建议 # 营销推广内控流程 # 无锡网络营销推广软文招聘 # 株洲网站seo推广 # 宁波市seo服务 # 品牌网站建设按需定制 # 建设企业网站首页网址 # seo公司推荐推广软件 # 框中 # 选择器 # 自定义 # 序列化 # 是一个 # 复选框 # 数据结构 # 如何使用

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：css flexbox在图文混排布局中的应用

下一篇：EJS模板中在单个脚本标签内渲染多个变量的技巧

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

使用 J*aScript 更新输入值到元素

动态更新元素内容

使用表单优化体验

使用 LocalStorage 持久化数据

总结