如何用JavaScript将单列容器内的区块拆分为两列？

没问题，既然没法手动修改插件生成的HTML，用JavaScript动态重构DOM完全可行。下面是一个简洁可靠的实现方案，还能灵活调整两列的元素分配：

核心思路 #

• 抓取目标容器和它的所有直接子div元素
• 自定义第一列要包含的元素数量（按需调整）
• 创建两个列容器并添加对应的类名
• 将子元素按设定数量拆分到两个列容器中
• 替换原容器的内容为这两个列容器

完整代码示例 #

// 获取目标容器和所有直接子div
const container = document.querySelector('.container');
const childDivs = Array.from(container.children); // 转为数组方便切片操作

// 自定义第一列的元素数量，可按需修改（比如5、3等）
const firstColumnCount = 5;

// 创建两个列容器并添加类名
const firstColumn = document.createElement('div');
firstColumn.classList.add('col-first');
const secondColumn = document.createElement('div');
secondColumn.classList.add('col-second');

// 拆分元素：前N个放入第一列，剩余放入第二列
firstColumn.append(...childDivs.slice(0, firstColumnCount));
secondColumn.append(...childDivs.slice(firstColumnCount));

// 清空原容器，插入新的列容器
container.innerHTML = '';
container.append(firstColumn, secondColumn);

额外优化说明 #

• 灵活调整列分配：只需要修改firstColumnCount的值即可，比如要实现5和10的分配，就设为5；如果想让两列元素数量尽量平均，可以写成Math.floor(childDivs.length / 2)
• 保留原有事件绑定：使用append方法是移动元素而非复制，子元素上原本绑定的事件不会丢失
• 样式适配：配合你已有的.container { display: flex; }，可以给列容器加样式优化布局，比如：

  .col-first, .col-second {
    flex: 1; /* 让两列平分容器宽度 */
    margin: 0 8px; /* 可选：添加列间距 */
  }
  

• 边界情况处理：如果子元素总数小于等于firstColumnCount，可以跳过创建空的第二列：

  container.append(firstColumn);
  if (childDivs.length > firstColumnCount) {
    container.append(secondColumn);
  }
  

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