本文详解如何通过原生 javascript 获取多个文本框的用户输入，并将其内容（或结构化信息）实时渲染到目标 div 中，重点解决 id 选择器误用、dom 元素定位错误及 html/css/js 协同问题。
本文详解如何通过原生 javascript 获取多个文本框的用户输入，并将其内容（或结构化信息）实时渲染到目标 div 中，重点解决 id 选择器误用、dom 元素定位错误及 html/css/js 协同问题。
在实际开发中，常需将表单输入内容动态展示在页面另一区域——例如左侧输入、右侧预览。但初学者容易陷入两个典型误区：混淆 class 与 id 的使用场景，以及误将 innerHTML 当作“获取输入值”的手段。原始代码中 document.getElementById('float-child').innerHTML 实际复制的是整个子 div 的 HTML 结构（含 input 标签本身），而非用户输入的文本值，这显然不符合“显示输入内容”的需求。
✅ 正确实现逻辑：提取值 → 构建内容 → 渲染到目标容器
首先，确保 DOM 元素具备唯一 id（而非仅 class），因为 getElementById() 严格依赖 id 属性：
<div class="float-container">
<div id="float-child"> <!-- 使用 id 而非 class -->
<label>First Name:</label><input id="txtFname"><br><label>Last Name:</label><input id="txtLname"><br><label>Age:</label><input id="txtage"><br><label>Email Address:</label><input id="txtemail"><br><button onclick="onTransfer()">Transfer</button>
</div>
<div id="float-child2"></div> <!-- 目标展示容器 -->
</div>
对应 CSS 需同步改为 ID 选择器（提升 specificity 并匹配 JS 调用）：
#float-child {
width: 48%; height: 50%; float: left; padding: 20px; border: 2px solid red;
}
#float-child2 {
width: 46%; height: 50%; float: right; padding: 20px; border: 2px solid red;
}
核心 JavaScript 函数应逐个读取 input 的 value 属性，并拼接为结构化 HTML 内容：
function onTransfer() {
// 获取各输入框的值
const fname = document.getElementById('txtFname').value || 'N/A';
const lname = document.getElementById('txtLname').value || 'N/A';
const age = document.getElementById('txtage').value || 'N/A';
const email = document.getElementById('txtemail').value || 'N/A';
// 构建展示内容（带语义化标签）
const content = `
<h3>User Summary</h3>
<p><strong>Full Name:</strong> ${fname} ${lname}</p>
<p><strong>Age:</strong> ${age}</p>
<p><strong>Email:</strong> ${email}</p>
`;
// 渲染到目标容器
document.getElementById('float-child2').innerHTML = content;
}
⚠️ 关键注意事项
- ID 唯一性：每个 id 在页面中必须唯一，重复 ID 将导致 getElementById() 返回不可预测结果；
- 空值防护：使用 || 'N/A' 避免 undefined 或空字符串破坏布局；
- 安全提示：若输入内容含用户提交的富文本，应使用 textContent 替代 innerHTML 防 XSS；本例为纯文本展示，innerHTML 可接受；
- 样式兼容性：float 布局在现代开发中建议替换为 Flexbox 或 Grid（如 display: flex），但本例保留以匹配原始需求；
- 事件解耦建议：生产环境推荐用 addEventListener 替代内联 onclick，提升可维护性：
document.getElementById('btnTransfer').addEventListener('click', onTransfer);
通过以上修正，即可实现“输入即展示”的交互效果——既符合纯 HTML/JavaScript 技术栈要求，又具备良好的可读性与健壮性。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
