J*aScript动态更新元素内容教程_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

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

J*aScript动态更新元素内容教程

2025-10-12

浏览次数：次

返回列表

javascript动态更新元素内容教程

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

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

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

HTML 结构

外语教育精品课程类网站模板(带手机版)1.4.2

外语教育精品课程类网站模板(带手机版)安装即用，自带人人站CMS内核，支持移动端，前端banner轮播图文本均已进行可视化配置，伪静态页面生成，支持内容模型，支持多种URL模式及模型。模板特点：1、安装即用，自带人人站CMS内核及企业站展示功能（产品，新闻，案例展示等），并可根据需要增加表单搜索等功能（自带模板） 2、支持响应式 3、前端banner轮播图文本均已进行可视化配置 4、伪静态页面生

1 查看详情外语教育精品课程类网站模板(带手机版)1.4.2

首先，我们需要一个包含输入框和按钮的 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>

J*aScript 代码

以下 J*aScript 代码实现了获取输入值并动态添加元素的功能。

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 键支持等。

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>

J*aScript 代码

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。

J*aScript 代码

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 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(); // 阻止页面跳转
  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 = ""; // 清空姓名输入框
  form.elements.message.value = ""; // 清空消息输入框
  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 用于存储消息的键名。
main 函数： 在页面加载时执行，用于恢复所有消息并添加事件监听器。
s*eMessage 函数： 将新的消息添加到 LocalStorage 中。
insertMessage 函数： 将消息添加到页面上的容器中。
messageToHtml 函数： 将消息对象转换为 HTML 字符串。
handleAdd 函数： 处理表单提交事件，保存消息并添加到页面上。
__retrieveAllMessages 函数： 从 LocalStorage 中获取所有消息。
__s*eAllMessages 函数： 将所有消息保存到 LocalStorage 中。

使用方法

将以上代码添加到 HTML 文件中。
在 main() 函数中调用 __retrieveAllMessages() 函数，从 LocalStorage 中获取所有消息。
使用 __s*eAllMessages() 函数将新的消息保存到 LocalStorage 中。

注意事项

LocalStorage 只能存储字符串，因此需要使用 JSON.stringify() 和 JSON.parse() 函数来序列化和反序列化数据。
LocalStorage 存储的数据是永久性的，除非手动删除，否则会一直存在。
LocalStorage 的容量有限，一般为 5MB 或 10MB，因此不适合存储大量数据。

总结

本文介绍了如何使用 J*aScript 动态更新 HTML 元素的内容，并提供了使用表单和 LocalStorage 的更佳实践方案。通过学习本文，开发者可以掌握动态添加元素、优化用户体验和持久化存储数据的技能，从而构建更强大和用户友好的 Web 应用程序。在实际开发中，可以根据具体需求选择合适的方案，并结合其他技术，例如 AJAX、WebSockets 等，来实现更复杂的功能。

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

# javascript # 芜湖建设网站公司电话 # 永州全网营销推广公司 # 可选 # 可以使用 # 自定义 # 如何使用 # 自带 # 跳转 # 复选框 # 清空 # 输入框 # 持久化 # css # java # html # js # json # ajax # html5 # websocket # ai # 表单 # 沈阳优化网站seo # 怎么找商业网站推广公司 # 安康网站关键词排名公司 # 池州seo推广方案公司 # 手表关键词排名 # 鹰潭财务优化师招聘网站 # 大竹网站建设公司 # 关键词网站排名推荐w火11星美评

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

上一篇：J*aScript动态添加数组项到HTML列表：实现每个元素独立显示

下一篇：为你的HTML/J*aScript幻灯片添加滑动效果

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

J*aScript动态更新元素内容教程

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

使用表单优化用户体验

使用 LocalStorage 持久化数据

总结