HTML+JS搜索框多输入动态打印功能实现求助

需求：在搜索栏输入内容后点击按钮，页面要保留所有历史输入内容——比如第一次输入“mark”显示“mark”，第二次输入“helen”显示“mark”“helen”，以此类推。

原代码如下：

page.html #

<div class="container-fluid" >           
      <form class="d-flex" role="search">
      <input class="form-control me-2" id="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <!-- 此处输入内容 -->
      <button class="btn btn-outline-success" type="button" onclick="send_tocontainer()">Search</button> <!-- 点击按钮后展示用户输入的所有内容 -->
            </form></div>
<div id="container-dx" >
    <p id="text"></p>
</div>

script.js #

function send_tocontainer(){
  let element=document.getElementById("form-control me-2").value;
           let newnode= document.createElement("p");
          const textnode= newnode.createTextNode(element)
  newnode.appendChild(textnode);
  document.getElementById("testo").innerHTML=element
                 
}

问题分析与修复方案 #

原代码存在的问题 #

• 输入框ID包含空格（form-control me-2），不符合HTML ID命名规范，导致getElementById无法正确获取元素
• 页面展示元素ID是text，但JS代码中错误地尝试获取testo元素，ID不匹配
• 每次点击按钮直接覆盖内容，没有保留历史输入，也未正确将新元素添加到页面

修正后的代码 #

page.html

<div class="container-fluid">           
  <form class="d-flex" role="search">
    <!-- 修正输入框ID为合法名称，移除空格 -->
    <input class="form-control me-2" id="search-input" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success" type="button" onclick="send_tocontainer()">Search</button>
  </form>
</div>
<div id="container-dx">
  <!-- 用div容器存放所有输入内容，替代单个p标签 -->
  <div id="content-container"></div>
</div>

script.js

function send_tocontainer(){
  // 获取输入框及输入值
  const inputElement = document.getElementById("search-input");
  const inputValue = inputElement.value.trim();
  
  // 输入为空则不执行后续操作
  if (!inputValue) return;

  // 创建新的p标签存储当前输入内容
  const newParagraph = document.createElement("p");
  newParagraph.textContent = inputValue;
  
  // 将新元素追加到展示容器中，实现内容累加
  document.getElementById("content-container").appendChild(newParagraph);
  
  // 清空输入框，方便下一次输入
  inputElement.value = "";
}

修复说明 #

1. 规范ID命名：将输入框ID改为search-input，符合HTML ID命名规则（不能含空格、特殊字符）
2. 调整展示容器：用div#content-container作为所有输入内容的父容器，每次点击按钮向其中添加新<p>元素，实现内容累加
3. 增加空值校验：避免输入空内容时生成无效标签
4. 优化用户体验：添加完内容后自动清空输入框

内容的提问来源于stack exchange，提问作者Elly