如何用JavaScript添加<br>标签解决HTML段落并排显示问题？

你的核心问题是没有把创建好的<p>元素添加到页面，反而直接追加了文本节点——这就导致所有输入的任务文本都直接放在同一个<div>里，没有块级元素包裹，自然会并排显示。

方案一：用<p>标签实现自动换行（推荐，符合语义化） #

修改JavaScript代码，把创建好的<p>元素追加到目标div中，而不是文本节点：

function newtask(){
  let ask = prompt("Enter the description of task");
  const para = document.createElement("p");
  const textNode = document.createTextNode(ask);
  para.appendChild(textNode);
  const container = document.getElementById("new");
  container.appendChild(para); // 追加完整的p元素，而非单独的文本节点
}

<p>是块级元素，默认会独占一行，自动实现换行效果，不需要额外添加<br>标签。

方案二：手动添加<br>标签（不推荐，语义化较差） #

如果一定要通过<br>来强制换行，可以在追加文本节点后，再创建并添加<br>元素：

function newtask(){
  let ask = prompt("Enter the description of task");
  const textNode = document.createTextNode(ask);
  const container = document.getElementById("new");
  container.appendChild(textNode);
  const lineBreak = document.createElement("br");
  container.appendChild(lineBreak);
}

但这种方式会让页面结构缺乏语义，后续样式调整也更麻烦，优先推荐方案一。

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