如何修改JavaScript脚本，将数据从表格改为div块展示？

问题背景 #

原脚本通过生成表格展示随机字符串组，现需替换为指定的Div嵌套格式：

<div class="wrap">
  <div class="one">numbers</div>
  <div class="one">numbers</div>
  ...
</div>

修改后的完整代码（单Wrap容器） #

此版本将所有生成的字符串放入同一个wrap容器中：

var wrapEl;

function generate() {
    var GenSix = document.getElementById("GenSix"),
        numbers = (new Array(20)).fill(1).map((a, i) => a + i),
        result = [],
        qnt = parseInt(document.getElementById('quantity').value, 10);

    GenSix.innerHTML = '';
    // 创建外层wrap容器，替代原表格
    wrapEl = document.createElement("DIV");
    wrapEl.className = 'wrap';
    GenSix.appendChild(wrapEl);

    while(result.length < qnt) {
        var left = shuffle(numbers).slice(0, 4).join('-'),
            right = shuffle(numbers).slice(0, 4).join('-');

        // 跳过左右重复的情况
        if(left == right)
            continue;

        result.push([left, right]);
        fillWrapWithContent(left, right);
    }
}

function shuffle(arr) {
    return arr.map(el => {
        return {
            item: el,
            sort: Math.random()
        }
    }).sort((a, b) => a.sort - b.sort).map(el => el.item);
}

// 生成Div结构的填充函数
function fillWrapWithContent(left, right) {
    // 创建第一个.one元素
    const divLeft = document.createElement("DIV");
    divLeft.className = 'one';
    divLeft.textContent = left;
    wrapEl.appendChild(divLeft);

    // 创建第二个.one元素
    const divRight = document.createElement("DIV");
    divRight.className = 'one';
    divRight.textContent = right;
    wrapEl.appendChild(divRight);
}

可选：每组数据单独使用Wrap容器 #

如果需要将原表格的每一行对应为一个独立的wrap容器，可使用以下修改：

function generate() {
    var GenSix = document.getElementById("GenSix"),
        numbers = (new Array(20)).fill(1).map((a, i) => a + i),
        result = [],
        qnt = parseInt(document.getElementById('quantity').value, 10);

    GenSix.innerHTML = '';

    while(result.length < qnt) {
        var left = shuffle(numbers).slice(0, 4).join('-'),
            right = shuffle(numbers).slice(0, 4).join('-');

        if(left == right)
            continue;

        result.push([left, right]);
        
        // 为当前组创建独立的wrap容器
        const wrapEl = document.createElement("DIV");
        wrapEl.className = 'wrap';
        GenSix.appendChild(wrapEl);

        // 填充当前组的两个.one元素
        const divLeft = document.createElement("DIV");
        divLeft.className = 'one';
        divLeft.textContent = left;
        wrapEl.appendChild(divLeft);

        const divRight = document.createElement("DIV");
        divRight.className = 'one';
        divRight.textContent = right;
        wrapEl.appendChild(divRight);
    }
}

function shuffle(arr) {
    return arr.map(el => {
        return {
            item: el,
            sort: Math.random()
        }
    }).sort((a, b) => a.sort - b.sort).map(el => el.item);
}

核心修改说明 #

1. 替换容器类型：删除原<table>创建逻辑，改为生成指定类名的Div容器
2. 重写DOM填充逻辑：移除表格行/单元格的创建代码，改为生成class="one"的Div元素
3. 保留业务逻辑：原随机数生成、去重、数量控制逻辑完全保留，仅修改UI渲染部分

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