如何用JavaScript创建多个带<a>标签的可点击迭代div

问题分析 #

1. .wrapper类设置了固定宽度4000px，但每个.one类的宽度是400vw（相当于4倍视口宽度），30个元素总宽度远超过4000px，flex布局下会被强制压缩，视觉上重叠或只显示第一个。
2. 用var声明变量存在变量提升风险，换成let更规范。
3. 每次创建元素后通过getElementById查找，不如直接操作刚创建的DOM元素高效。

修正后的代码 #

JS代码（优化版）

const adoptionSqs = 30;
const container = document.getElementById("rewild-the-valley");

for (let i = 0; i < adoptionSqs; i++) {
  // 创建a标签
  const adoptionA = document.createElement("a");
  adoptionA.href = `#rewild-${i}`; // 模板字符串更简洁，锚点需加#

  // 创建div标签
  const divElement = document.createElement("div");
  divElement.id = `rewild-${i}`;
  divElement.classList.add("one", "slide"); // 一次性添加多个类

  // 组装并添加到容器
  adoptionA.appendChild(divElement);
  container.appendChild(adoptionA);
}

CSS代码（调整布局）

去掉.wrapper的固定宽度，让容器自适应元素总宽度：

.wrapper {
  display: flex;
  flex-direction: row;
  /* 移除固定width: 4000px */
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
  background: url("https://tirnatur.digitalpercolator.co.uk/wp-content/uploads/2023/03/Clouds-scaled.jpg");
}

若需每个.slide保持100vw宽度，调整.one的宽度：

.one {
  border: 1px solid red;
  background-color: black;
  opacity: 0.6;
  background-size: auto 80vh;
  background-repeat: repeat-x;
  width: 100vw; /* 从400vw改为100vw，与.slide保持一致 */
}

HTML代码（补全闭合标签）

确保标签正确闭合，避免布局异常：

<div class="outer-wrapper">
  <div class="wrapper" id="rewild-the-valley">
  </div>
</div>

验证方法 #

打开浏览器开发者工具（F12），查看#rewild-the-valley的子节点，即可看到30个标签已正确生成。