JavaScript DOM动态追加元素纵向排列异常修复方案

• 对应练习：30 Days Of JavaScript 第22天DOM操作 Level 1 第1题
• 故障现象：使用JavaScript动态生成数字色块时，所有元素默认纵向单列排布，无法实现题目示例的紧凑网格排列效果
• 实现约束：优先仅修改JavaScript代码完成效果，尽可能不改动现有HTML结构，不新增复杂嵌套盒子，基于原生HTML5+CSS3实现

JavaScript 代码 #

let hh = document.querySelector('h1')
hh.style.textAlign = 'center'
let hh1 = document.querySelector('h2')
hh1.style.textAlign = 'center'
let hh2 = document.querySelector('h3')
hh2.style.textAlign = 'center'

for (i = 0; i <= 100; i++) {

  let p1 = document.createElement('div');

  {
    if (i % 2 == 0) {

      p1.className = 'Container'
      p1.style.fontSize = '25px'
      p1.style.backgroundColor = '#91E537'
      p1.textContent = i;
      p1.style.padding = '55px'
      p1.style.margin = '1px'
      p1.style.textAlign = 'center'
      p1.style.width = '20px'
      document.body.appendChild(p1);
    } else {
      p1.className = 'Container'
      p1.style.fontSize = '25px'
      p1.textContent = i;
      p1.style.backgroundColor = '#E5D037'
      p1.style.padding = '55px'
      p1.style.margin = '1px'
      p1.style.textAlign = 'center'
      p1.style.width = '20px'
      document.body.appendChild(p1);
    }
  }
  if (i >= 2) {
    let flag = 0;
    for (j = 2; j <= i / 2; j++) {
      if (i % j == 0) {
        flag = 1;
        break;
      }
    }
    
    if (flag == 0) {
      p1.className = 'Container'
      p1.style.fontSize = '25px'
      p1.style.backgroundColor = '#E55137'
      p1.textContent = i;
      p1.style.padding = '55px'
      p1.style.margin = '1px'
      p1.style.textAlign = 'center'
      p1.style.width = '20px'
      document.body.appendChild(p1);

    }
  }
}

HTML 代码 #

<h1>Number Generator</h1>
<h2>30 days of JavaScript</h2>
<h3>Author:ABC</h3>
<div class="container"></div>

• div默认是display: block块级元素，块级元素会独占整行，直接追加到body下自然全部纵向排列
• 代码逻辑存在重复追加问题：奇偶判断分支会先追加一次元素，素数判断分支命中时会再追加一次同一个数字，导致素数重复显示
• 现有HTML已经预留了.container容器，但代码完全没有使用该容器做统一布局
• 样式重复冗余：同个元素的公共样式在三个分支里重复书写，维护性差

直接替换原有JS代码即可实现效果：

// 标题居中逻辑保留
const h1 = document.querySelector('h1')
h1.style.textAlign = 'center'
const h2 = document.querySelector('h2')
h2.style.textAlign = 'center'
const h3 = document.querySelector('h3')
h3.style.textAlign = 'center'

// 获取HTML中已存在的容器，通过JS给容器加Flex布局实现自动换行紧凑排列
const numContainer = document.querySelector('.container')
numContainer.style.display = 'flex'
numContainer.style.flexWrap = 'wrap'
numContainer.style.justifyContent = 'center'
numContainer.style.gap = '2px'
numContainer.style.margin = '30px auto'
numContainer.style.maxWidth = '860px'

// 循环生成0-100的数字块
for (let i = 0; i <= 100; i++) {
  const numBlock = document.createElement('div')
  // 统一设置所有数字块的公共样式，无需重复书写
  numBlock.style.width = '70px'
  numBlock.style.height = '70px'
  numBlock.style.display = 'flex'
  numBlock.style.alignItems = 'center'
  numBlock.style.justifyContent = 'center'
  numBlock.style.fontSize = '25px'
  numBlock.textContent = i

  // 优先判断是否为素数
  let isPrime = i >= 2
  for (let j = 2; j <= Math.sqrt(i); j++) {
    if (i % j === 0) {
      isPrime = false
      break
    }
  }

  // 根据数字类型设置对应背景色
  if (isPrime) {
    numBlock.style.backgroundColor = '#E55137'
  } else if (i % 2 === 0) {
    numBlock.style.backgroundColor = '#91E537'
  } else {
    numBlock.style.backgroundColor = '#E5D037'
  }

  // 每个数字块只追加一次到容器中
  numContainer.appendChild(numBlock)
}

实现说明：Flex布局的flex-wrap: wrap属性会让子元素在容器宽度不足时自动换行，天然实现紧凑网格效果，不需要额外嵌套复杂盒子，所有样式均通过JS直接写入，完全符合不修改HTML的要求。

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