JS实现句子单词逐行<li>显示问题：页面仅展示单个单词求助

嘿，我来帮你排查这个问题！你页面上只显示一个单词的核心原因是每次循环都用innerHTML =直接覆盖了wordText的内容，而不是往里面追加新元素。

问题根源拆解 #

你在遍历changeSequenceWords的循环里，每次都执行wordText.innerHTML =

Words:

${word}

``——这意味着每一次循环都会把wordText内部的所有内容替换成当前的<h4>和单个<li>，循环结束后自然只剩最后一个单词了。另外还有个小问题：<li>标签必须放在<ul>或<ol>容器里，直接放在<span>里是不符合HTML规范的，可能会导致浏览器解析异常。

解决方案 #

方案1：使用innerHTML +=追加内容（优化结构版）

先把标题<h4>放在循环外面避免重复创建，然后用+=往列表容器里追加每个<li>：

const wordText = document.createElement("div");
const lettersSection = document.querySelector(".letter");
wordText.classList.add("wordText");
lettersSection.appendChild(wordText);
const jokeText = document.querySelectorAll(".random_joke h3");

// 先创建标题和列表容器，避免循环里重复生成
wordText.innerHTML = `<h4>Words:</h4><ul></ul>`;
const wordList = wordText.querySelector("ul");

for (let el of jokeText) {
  const matchWords = el.textContent.match(/[a-z]+/gi);
  const changeSequenceWords = matchWords.sort(byLength);
  
  for (let word of changeSequenceWords ) {
    // 往ul里追加单个li元素
    wordList.innerHTML += `<li>${word}</li>`;
  }
}

方案2：使用DOM元素创建（更推荐，安全规范）

这种方式完全通过DOM API创建和添加元素，避免了innerHTML可能带来的XSS风险，同时保证HTML结构的正确性：

const wordText = document.createElement("div");
const lettersSection = document.querySelector(".letter");
wordText.classList.add("wordText");
lettersSection.appendChild(wordText);
const jokeText = document.querySelectorAll(".random_joke h3");

// 手动创建标题和列表容器
const title = document.createElement("h4");
title.textContent = "Words:";
const wordList = document.createElement("ul");
wordText.appendChild(title);
wordText.appendChild(wordList);

for (let el of jokeText) {
  const matchWords = el.textContent.match(/[a-z]+/gi);
  const changeSequenceWords = matchWords.sort(byLength);
  
  for (let word of changeSequenceWords ) {
    const li = document.createElement("li");
    li.textContent = word;
    wordList.appendChild(li);
  }
}

两种方法都能解决你的问题，方案2更符合前端开发的最佳实践，推荐优先使用。

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