使用AppendChild()时<br>标签失效，疑似display:flex所致

你的推测没错，<br>标签失效确实是因为#sauce设置了display:flex导致的——Flex容器默认以**横向（row）**为主轴排列所有子元素，所有直接子元素（复选框、p标签、br标签）都会被放在同一行里，<br>作为行内元素在Flex布局逻辑里完全起不到换行作用。

修复方案（两种可选） #

方案1：调整Flex容器的排列方向（最简洁）

直接修改CSS，把Flex容器的主轴方向改成纵向，这样每个待办相关的元素会自动从上到下排列，不需要依赖<br>：

#sauce{
  display: flex;
  flex-direction: column; /* 添加这一行，设置纵向排列 */
  gap: 8px; /* 可选：给每个待办项之间添加间距 */
}

同时可以删掉JS里创建<br>标签的冗余代码：

// 移除以下两行代码
let line = document.createElement("br");
sauce.appendChild(line);

方案2：将每个待办项包装为独立容器（结构更清晰）

如果需要保留Flex的横向布局特性（比如后续要做响应式调整），可以把每个复选框和对应的文本包装成一个独立容器，让每个容器作为#sauce的子元素：

function myFunction(){
  const sauce = document.getElementById("sauce")
  const textareaEle = document.getElementById('j');
  
  let checkbox = document.createElement("input");
  checkbox.setAttribute("type", "checkbox");
  checkbox.setAttribute("class", "checkbox"); // 修正：setAttribute一次只能设置一个属性，分开调用
  let paragraph = document.createElement("p");
  paragraph.setAttribute("class", "checkbox");
  let konq = document.createTextNode(textareaEle.value);
  paragraph.appendChild(konq);
  
  // 新增：创建单个待办项的容器
  let todoItem = document.createElement("div");
  todoItem.appendChild(checkbox);
  todoItem.appendChild(paragraph);
  
  sauce.appendChild(todoItem); // 仅将容器添加到sauce中
}

然后给#sauce添加换行属性，让容器超出宽度时自动换行：

#sauce{
  display: flex;
  flex-wrap: wrap; /* 子元素超出容器宽度时自动换行 */
  gap: 12px; /* 可选：待办项之间的间距 */
}

额外修正：属性设置错误 #

你的JS里设置checkbox属性的写法有误，setAttribute一次只能传递一对键值，多传的参数不会生效，正确写法应为：

checkbox.setAttribute("type", "checkbox");
checkbox.setAttribute("class", "checkbox");

// 或者更简洁的DOM属性写法：
checkbox.type = "checkbox";
checkbox.className = "checkbox";

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