本文详解如何通过 document.getElementById().value 获取表单输入值，并利用 innerHTML 将其精准写入指定 DOM 元素，实现联系人信息的动态展示。
本文详解如何通过 `document.getelementbyid().value` 获取表单输入值，并利用 `innerhtml` 将其精准写入指定 dom 元素，实现联系人信息的动态展示。
在前端开发入门阶段，将用户输入实时反映到页面上是一个经典且实用的练习。本教程聚焦于一个典型场景：从表单中提取「姓名」「邮箱」和「留言」三个字段，并通过 innerHTML 属性将其显示在预设的联系人卡片（Contact Card）中。
核心逻辑梳理
关键在于区分两类 DOM 操作：
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
- 读取输入值： 元素的内容需用 .value（而非 .innerHTML）获取；
-
写入目标区域：
等容器是空标签，应通过 .innerHTML = value 赋值，而非修改 自身。
完整可运行代码（script.js）
// 获取提交按钮并绑定点击事件
const submitBtn = document.getElementById('btn');
submitBtn.addEventListener('click', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
getAndPopulateInfo();
});
function getAndPopulateInfo() {
// 1. 从表单输入框获取用户输入
const fullName = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;
// 2. 定位联系人卡片中的对应显示位置
const postName = document.getElementById('postFullName');
const postEmail = document.getElementById('postEmail');
const postMessage = document.getElementById('postMessage');
// 3. 使用 innerHTML 将数据写入目标元素
postName.innerHTML = fullName || '未填写';
postEmail.innerHTML = email || '未填写';
postMessage.innerHTML = message || '未填写';
}
注意事项与最佳实践
- ✅ ID 必须严格匹配：确保 HTML 中的 id="name"、id="postEmail" 等与 JS 中 getElementById() 的参数完全一致（区分大小写）；
- ✅ 避免变量命名冲突：如原尝试中 Email 和 Message 首字母大写虽合法，但建议统一使用小驼峰（email, message）提升可读性；
- ⚠️ 防止空值导致空白显示：示例中添加了 || '未填写' 提供默认回退文案，增强用户体验；
- ? 安全提示（进阶）：若未来需支持富文本或用户输入含 HTML 标签，应改用 textContent 防止 XSS；当前纯文本场景下 innerHTML 安全可用；
- ? 调试技巧：可在 getAndPopulateInfo() 开头添加 console.log({fullName, email, message}) 快速验证数据是否成功捕获。
掌握这一模式后，你不仅能完成联系人卡片任务，还可轻松扩展至任何“表单采集 → 页面展示”的交互场景——这是构建动态网页的基石能力之一。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
