JavaScript动态更新元素内容教程-js教程-PHP中文网

JavaScript动态更新元素内容教程

心靈之曲

发布： 2025-10-12 09:54:30

原创

771人浏览过

javascript动态更新元素内容教程

本文旨在指导开发者如何使用 JavaScript 动态更新 HTML 元素的内容，重点讲解如何获取输入值并将其添加到新创建的元素中，并提供使用表单和本地存储的更佳实践方案，以实现更高效和用户友好的交互体验。

动态添加包含输入值的元素

本节介绍如何使用 JavaScript 获取输入框中的值，并将其动态添加到页面上的新元素中。这在创建评论区、消息列表等动态内容时非常有用。

HTML 结构

首先，我们需要一个包含输入框和按钮的 HTML 结构，以及一个用于显示动态添加元素的容器。

立即学习“Java免费学习笔记（深入）”；

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

登录后复制

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', `
    <div class="message-item">
      <h3>${nameInput.value}</h3>
      <p>${messageInput.value}</p>
    </div>
  `);
  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 键支持等。

新CG儿

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

147

查看详情

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>

登录后复制

JavaScript 代码

const handleAdd = (e) => {
  e.preventDefault(); // 阻止页面跳转
  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 = '';    // 清空姓名输入框
  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 }) => `
  <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 = ""; // 清空姓名输入框
  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 等，来实现更复杂的功能。

以上就是JavaScript动态更新元素内容教程的详细内容，更多请关注php中文网其它相关文章！