flex布局下JS动态添加元素后实现换行的问题求助

问题原因 #

你的.div-result使用display: flex，默认是横向排列（row方向），每次提交直接将单个<h2>元素添加进去，所有元素会挤在同一行；同时代码里重复将元素添加到document.body和divResult，属于冗余操作。

修正步骤 #

1. 修正JavaScript代码 #

每次提交时，把当前一组数据的所有元素包裹在一个容器（比如<div class="result-row">）中，再将这个容器添加到.div-result，让每组数据作为独立整体排列。同时移除冗余的document.body.appendChild代码：

// 先获取页面元素（脚本开头添加）
const inputStockName = document.querySelector(".input-stock");
const inputStrategy = document.querySelector(".input-strategy");
const inputEnterPrice = document.querySelector(".input-enter");
const inputStopLoss = document.querySelector(".input-stop-loss");
const inputProfitPrice = document.querySelector(".input-profit-price");
const inputShares = document.querySelector(".input-shares");
const divResult = document.querySelector(".div-result");
const submitBtn = document.querySelector(".btn-submit");

// 绑定按钮点击事件
submitBtn.addEventListener("click", addData);

function addData() {
    // 获取输入值
    const strategyValue = inputStrategy.value;
    const sharesValue = inputShares.value;
    const enterPriceValue = inputEnterPrice.value;
    const stopLossValue = inputStopLoss.value;
    const profitPriceValue = inputProfitPrice.value;
    const stockNameValue = inputStockName.value;

    // 创建单条数据的容器
    const resultRow = document.createElement("div");
    resultRow.classList.add("result-row");

    // 创建并设置各个字段元素
    const stockName = document.createElement("h2");
    stockName.textContent = stockNameValue;
    
    const stockStrategy = document.createElement("h2");
    stockStrategy.textContent = strategyValue;
    
    const stockValue = document.createElement("h2");
    stockValue.textContent = sharesValue;
    
    const stockPrice = document.createElement("h2");
    stockPrice.textContent = enterPriceValue;
    
    const stockStopLoss = document.createElement("h2");
    stockStopLoss.textContent = stopLossValue;
    
    const stockProfitPrice = document.createElement("h2");
    stockProfitPrice.textContent = profitPriceValue;

    // 将字段元素添加到单条容器中
    resultRow.appendChild(stockName);
    resultRow.appendChild(stockStrategy);
    resultRow.appendChild(stockValue);
    resultRow.appendChild(stockPrice);
    resultRow.appendChild(stockStopLoss);
    resultRow.appendChild(stockProfitPrice);

    // 将单条容器添加到结果区
    divResult.appendChild(resultRow);
}

2. 调整CSS样式 #

给新增的.result-row设置横向flex布局，同时让.div-result改为纵向排列，确保每组数据占一行：

.div-result {
    display: flex;
    flex-direction: column; /* 纵向排列每组数据 */
    justify-content: center;
    border: solid 5px blue;
    gap: 10px; /* 每组数据之间的间距 */
}

.result-row {
    display: flex;
    justify-content: center;
}

.div-result h2{
    color: blue;
    margin-left: 5%;
}

效果说明 #

修改后，每次点击提交按钮，当前输入的一组数据会被包裹在独立的.result-row容器中，作为单独一行显示在结果区，不会和之前的内容挤在同一行，符合预期效果。

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