如何在JavaScript中让追加的多个子元素显示在不同行？

首先纠正你代码里的关键错误：创建按钮时不能用createElement("btn22")这种自定义标签，必须用标准的<button>元素，否则浏览器会把它们当作普通行内元素处理，导致显示异常。

接下来提供几种让按钮换行显示的方案：

方案1：通过CSS统一设置按钮为块级元素 #

直接给.btns类添加样式，让所有按钮独占一行：

.btns {
  display: block;
  margin: 6px 0; /* 可选：增加上下间距，优化视觉效果 */
}

修改后，不管是页面原有按钮还是JS新增的按钮，都会自动换行显示。

方案2：追加按钮时插入换行元素 #

在两个按钮之间插入<br>标签强制换行：

const btnElement = document.getElementById("btn");
// 修正为创建标准button元素
const button = document.createElement("button");
const button1 = document.createElement("button");
button.innerText = "Yes";
button1.innerText = "No";

button.classList.add("btns");
button1.classList.add("btns");

btnElement.addEventListener("click", () => {
    document.body.appendChild(button);
    // 插入换行标签
    document.body.appendChild(document.createElement("br"));
    document.body.appendChild(button1);
})

方案3：用容器包裹按钮，通过布局控制排列 #

创建一个容器元素（比如div），把按钮放入其中，再通过Flex布局让按钮垂直排列：

const btnElement = document.getElementById("btn");
const button = document.createElement("button");
const button1 = document.createElement("button");
button.innerText = "Yes";
button1.innerText = "No";

button.classList.add("btns");
button1.classList.add("btns");

btnElement.addEventListener("click", () => {
    const btnContainer = document.createElement("div");
    btnContainer.style.display = "flex";
    btnContainer.style.flexDirection = "column";
    btnContainer.style.gap = "6px"; // 按钮之间的间距

    btnContainer.appendChild(button);
    btnContainer.appendChild(button1);
    document.body.appendChild(btnContainer);
})

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