如何在元素上方添加段落？JS待办列表新增元素无法上下排列问题

你新增的任务全部排在同一行，本质是当前代码往页面里插入的是没有标签包裹的纯文本。纯文本属于行内内容，不会主动触发换行，自然会和相邻内容横向排布在同一行。

只需要在插入文本时，给每条任务套上默认独占一行的块级标签（比如<div>、<li>），块级元素的固有属性会让每个任务自动从上到下依次排列。

可直接运行的修正代码 #

调整后的JS逻辑：

function buttonFunction() {
  const inputBox = document.getElementById("textbox");
  const insertAnchor = document.getElementById('blank');
  // 插入内容时用块级div包裹任务文本，替代原来的纯文本插入
  insertAnchor.insertAdjacentHTML("beforebegin", `<div>${inputBox.value}</div>`);
  // 可选优化：插入完成后清空输入框，提升使用体验
  inputBox.value = "";
}

原有HTML结构无需大改：

<input id="textbox" type="text" value=''>
<button id="button" onclick="buttonFunction()">Add task</button>
<p id='blank'> </p>

优化建议：如果想要更语义化的待办列表，可以把包裹用的<div>替换为<li>，外层搭配<ul>容器，排列效果和逻辑完全一致。

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