如何使用纯 JavaScript 将表单输入值动态显示在指定 div 中-html教程-PHP中文网

如何使用纯 JavaScript 将表单输入值动态显示在指定 div 中

本文详解如何通过原生 javascript 获取多个文本框的输入值，并将其准确、整洁地显示在目标 div 内，重点纠正 id 选择器误用、html/css 选择器不匹配等常见错误，全程无需框架即可实现。

本文详解如何通过原生 javascript 获取多个文本框的输入值，并将其准确、整洁地显示在目标 div 内，重点纠正 id 选择器误用、html/css 选择器不匹配等常见错误，全程无需框架即可实现。

在实际开发中，常需将用户在表单中填写的内容实时展示在页面另一区域。但初学者容易陷入两个典型误区：一是混淆 id 与 class 的使用场景，二是错误地复制整个 HTML 结构而非提取真实输入值。你提供的代码中，onTransfer() 函数试图用 document.getElementById('float-child').innerHTML 获取子 div 的全部内容（含标签、按钮等），这会导致冗余 HTML 被重复渲染，且无法动态反映用户最新输入；同时 CSS 中使用了类选择器（.float-child2），而 JS 却调用 getElementById()，造成选择器不匹配，自然无法定位目标元素。

要正确实现“输入→提取→展示”流程，应严格遵循以下三步：

确保唯一标识符统一：为需要操作的容器和输入框分配明确的 id，并在 CSS 中改用 ID 选择器（#id-name）；
精准提取输入值：使用 element.value 获取的当前文本内容，而非 innerHTML；
结构化输出到目标容器：将提取的值组合成清晰的 HTML 字符串，再赋值给目标 div 的 innerHTML。

以下是修正后的完整示例：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载



  <style>
    .float-container {
      border: 3px solid #fff;
      padding: 20px;
      width: 100%;
      height: auto; /* 避免高度塌陷 */
      overflow: hidden; /* 清除浮动影响 */
    }
    #float-child {
      width: 48%;
      float: left;
      padding: 20px;
      border: 2px solid red;
      box-sizing: border-box;
    }
    #float-child2 {
      width: 46%;
      float: right;
      padding: 20px;
      border: 2px solid red;
      box-sizing: border-box;
    }
  </style><div class="float-container">
  <div id="float-child">
    <label>First Name:</label><input title="FirstName" id="txtFname"><br><label>Last Name:</label><input title="lastName" id="txtLname"><br><label>Age:</label><input title="age" id="txtage"><br><label>Email Address:</label><input title="Email" id="txtemail"><br><button id="btnTransfer" onclick="onTransfer()">Transfer</button>
  </div>

  <div id="float-child2">
    <!-- 展示区域 -->
  </div>
</div>

<script>
function onTransfer() {
  // ✅ 正确获取各输入框的 value 值
  const fname = document.getElementById('txtFname').value || '—';
  const lname = document.getElementById('txtLname').value || '—';
  const age = document.getElementById('txtage').value || '—';
  const email = document.getElementById('txtemail').value || '—';

  // ✅ 构建结构化展示内容（避免 XSS，此处为简化演示；生产环境建议 innerText 或 DOM 方法）
  const displayHTML = `
    <h3>User Summary
    <p><strong>Full Name: ${fname} ${lname}
    <p><strong>Age: ${age}
    <p><strong>Email: ${email}
  `;

  // ✅ 精准写入目标 div
  document.getElementById('float-child2').innerHTML = displayHTML;
}
</script>

关键注意事项：

✅ ID 唯一性：每个 id 在页面中必须唯一，不可重复；若需复用样式，请保留 .float-container 类，仅对 JS 操作对象使用 id；
✅ 浮动清除：父容器添加 overflow: hidden 或使用 clearfix，防止子 div 脱离文档流；
⚠️ 安全性提示：直接拼接 innerHTML 存在 XSS 风险。如需展示用户输入的富文本，请先做 HTML 转义（如 textContent + 动态创建元素），或使用 DOMPurify 等库；
✅ 空值处理：使用 || '—' 避免显示 undefined，提升用户体验；
✅ 语义优化：建议为添加 type="text" 和 required 属性，并用
包裹以支持原生校验与回车提交。