如何基于给定JavaScript变量生成章节选择器与图片列表？

这是个挺典型的动态DOM生成需求，我给你写了一套清晰的实现代码，每一步都加了注释，方便你跟着理解：

// 先定义题目里给出的变量
var only_chapter = [["19", "2191141"], ["18", "1918042"], ["17", "1189512"], ["16", "950194"], ["15", "408357"], ["14", "58087"], ["13", "58091"], ["12", "58096"], ["11", "58103"], ["10", "58109"], ["9", "58116"], ["8", "58121"], ["7", "58128"], ["6", "58134"], ["5", "58140"], ["4", "58147"], ["3", "58153"], ["2", "58159"], ["1", "58164"]];
var chapter = 2191141;
var img_list = ["https:\/\/example.com\/upload\/zxcvbn.jpg", "https:\/\/example.com\/upload\/qwerty.jpg"];

// 1. 生成class为chapter_selector的select标签
function createChapterSelector() {
  // 创建select元素
  const selectEl = document.createElement('select');
  selectEl.className = 'chapter_selector';

  // 遍历章节数组，生成每个option
  only_chapter.forEach(item => {
    const chapterNum = item[0];
    const chapterId = item[1];
    const optionEl = document.createElement('option');
    optionEl.value = chapterId;
    optionEl.textContent = `第${chapterNum}章`; // 若不需要前缀，直接写chapterNum即可

    // 匹配当前选中的章节，设置selected属性
    if (chapterId == chapter) {
      optionEl.selected = true;
    }

    selectEl.appendChild(optionEl);
  });

  // 把生成的select插入到页面目标位置，示例插入到body，可替换为指定容器
  document.body.appendChild(selectEl);
}

// 2. 生成class为imgs的div标签，包含所有图片
function createImageContainer() {
  // 创建div容器
  const imgContainer = document.createElement('div');
  imgContainer.className = 'imgs';

  // 遍历图片地址数组，生成img元素
  img_list.forEach(imgUrl => {
    const imgEl = document.createElement('img');
    imgEl.src = imgUrl;
    // 加上alt属性提升可访问性，可根据需求修改文本内容
    imgEl.alt = `章节配图`;
    imgContainer.appendChild(imgEl);
  });

  // 把图片容器插入到页面目标位置
  document.body.appendChild(imgContainer);
}

// 调用两个函数生成DOM元素
createChapterSelector();
createImageContainer();

关键逻辑说明： #

• 章节选择器部分：
  • 通过document.createElement创建select元素并添加指定class
  • 遍历only_chapter数组时，子数组第一个元素作为option显示文本，第二个作为option的value值
  • 对比chapter变量与当前章节ID，匹配时给option添加selected属性，实现默认选中效果
• 图片容器部分：
  • 先创建div容器并添加class，再遍历img_list生成每个img标签，将地址赋值给src属性
  • 额外添加alt属性是前端最佳实践，既方便屏幕阅读器识别内容，也能在图片加载失败时显示替代文本

你可以根据页面结构，调整最后插入DOM的位置（比如把document.body.appendChild改成插入到指定容器元素中）。

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