编码测验中动态生成li的换行失效问题求助

换行无效的核心原因 #

HTML 文本节点不会把 \n 解析成换行，只会当作普通空格处理。但更关键的是你代码逻辑本身有问题——不该把所有新题目选项塞进同一个 <li>，每个选项本来就该是独立的列表项。

完整修复方案 #

1. 移除无意义循环 #

原代码里的 for (var i = 0; i < questions.length; i++) 完全多余，每次迭代都重复设置同一个题目内容，直接删掉即可。

2. 重构点击事件逻辑 #

点击选项后，要清空列表，为新题目的每个选项重新创建独立的 <li>，而非在旧 <li> 里累加内容。

修复后的代码 #

function presentQuestions() {
    // 保留计时器逻辑
    interval = setInterval(function () {
        timeCounter++;
        timeEl.textContent = timeCounter;
    }, 1000);

    // 初始化当前题目显示
    askNow.innerHTML = "";
    ansList.innerHTML = "";
    const currentQuestion = questions[changeQuestion];
    askNow.textContent = currentQuestion.title;
    
    // 创建当前题目的选项列表
    currentQuestion.choices.forEach(function (choice) {
        var li = document.createElement('li');
        li.setAttribute('id', setId++);
        li.textContent = choice;
        ansList.append(li);

        li.addEventListener('click', function (e) {
            e.preventDefault();
            // 切换到下一题，加边界判断防止越界
            changeQuestion++;
            if (changeQuestion >= questions.length) {
                clearInterval(interval);
                askNow.textContent = "测验结束！";
                ansList.innerHTML = "";
                return;
            }

            // 更新题目和选项
            askNow.innerHTML = "";
            ansList.innerHTML = "";
            const nextQuestion = questions[changeQuestion];
            askNow.textContent = nextQuestion.title;
            
            // 重新创建下一题的所有选项li并绑定事件
            nextQuestion.choices.forEach(function (nextChoice) {
                var newLi = document.createElement('li');
                newLi.setAttribute('id', setId++);
                newLi.textContent = nextChoice;
                ansList.append(newLi);
                newLi.addEventListener('click', arguments.callee);
            });
        });
    });
}

额外优化点 #

• 增加题目边界判断，避免下标越界报错
• 提取当前题目到变量，减少重复数组访问，代码更清晰
• 新创建的选项li自动绑定点击事件，保证后续切换题目功能正常

单个li内换行的补充说明 #

如果确实需要在单个 <li> 里实现换行（比如选项内容有多行），别用 \n，可以二选一：

• 用 innerHTML 替换 textContent，把 \n 换成 <br>：li.innerHTML = "第一行<br>第二行"
• 给 <li> 加 CSS 样式：li.style.whiteSpace = "pre-line"，这样文本里的 \n 会被解析为换行

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