JS待办列表问题：提交后待办内容无法保持分行显示

你的代码存在两个核心问题，导致多次点击Submit后文本并排显示：

1. 首次提交直接将文本写入<p id="to-do-txt">，后续提交时虽然创建了<p>标签，但最终插入的是文本节点而非完整的<p>标签——文本节点属于行内元素，自然会并排展示。
2. HTML中的输出容器是class="output"，但JS里用getElementById("output")查找元素，根本无法定位到目标容器，导致文本节点被插入到页面的错误位置。

修正后的JavaScript代码 #

function submit() {
  const todoText = document.getElementById("todo_input").value.trim();
  if (!todoText) return; // 过滤空内容，避免提交空待办

  // 创建新的待办项标签
  const todoItem = document.createElement('p');
  todoItem.className = 'todo-item'; // 用class代替重复的id（id需唯一）
  todoItem.textContent = todoText;

  // 找到正确的输出容器并插入新待办项
  const outputContainer = document.querySelector('.output');
  outputContainer.appendChild(todoItem);

  // 清空输入框，提升体验
  document.getElementById("todo_input").value = '';
}

// 完善清空功能
function clear() {
  const outputContainer = document.querySelector('.output');
  outputContainer.innerHTML = '';
}

修正后的HTML代码 #

<body>
    <!-- 待办输入区 -->
    <div>
      <input type="text" id="todo_input" name="todo" />
    </div>

    <div class="button-container">
      <button id="click" onclick="submit()" type="button">Submit</button>
    </div>

    <div class="clear-container">
      <button id="clear" onclick="clear()" type="button">Clear</button>
    </div>
  
    <!-- 待办输出区 -->
    <div>
      <div class="output">
        <!-- 无需预先放置p标签，动态创建即可 -->
      </div>
    </div>

    <script src="./js/script.js"></script>
</body>

关键修改说明 #

• 移除了冗余的全局变量和display函数，将逻辑合并到submit中，简化流程。
• 每次提交都创建独立的<p>标签（块级元素），确保每个待办项独占一行。
• 增加空内容校验，避免无效提交。
• 提交后自动清空输入框，优化用户体验。
• 修正了清空函数，直接清空输出容器的所有内容。

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