遍历span元素并将内容移入单个div时仅显示最后一项的问题求助

嗨，我来帮你排查下问题～你遇到的“只显示最后一个span内容”的情况，主要有两个核心原因：

• 重复使用同一个DOM元素：你只在循环外创建了一个<span>，每次循环都修改它的文本内容再添加到div里。但DOM元素是唯一的，重复调用appendChild只会把这个span从当前位置移到新位置，所以最后只会留下最后一次设置的内容。
• 移除ul的时机不合理：你把ul.remove()放在了循环内部，第一次循环就会删掉整个ul，虽然这里querySelectorAll返回的是静态集合（不会因为DOM变化而改变），但逻辑上应该等所有内容处理完再移除原列表，流程更顺畅。

修正后的代码 #

JavaScript 代码 #

const items = document.querySelectorAll("li span");
const div = document.querySelector("div");
const ul = document.querySelector("ul");

// 遍历每个原span元素
items.forEach(item => {
  // 每次循环创建新的span元素，避免内容覆盖
  const newSpan = document.createElement("span");
  newSpan.textContent = item.textContent;
  // 将新span添加到目标div中
  div.appendChild(newSpan);
  // 可选：添加空格分隔内容，避免文字连在一起（可根据需求替换成逗号、换行等）
  div.appendChild(document.createTextNode(" "));
});

// 所有内容处理完成后，再移除原有的ul列表
ul.remove();

HTML 代码（保持原结构即可） #

<div>
  <ul>
    <li><span>One</span></li>
    <li><span>Two</span></li>
    <li><span>Three</span></li>
  </ul>
</div>

关键修改说明 #

1. 循环内创建新span：把创建span的操作放到循环内部，确保每个原span的内容都对应一个独立的DOM元素，不会被后续循环覆盖。
2. 调整移除ul的时机：将ul.remove()移到循环外部，确保所有新span都添加完成后再清理原列表，避免DOM操作混乱。
3. 添加分隔符（可选）：用document.createTextNode(" ")给每个span之间加空格，让内容排版更美观，你可以根据需求换成其他分隔样式。

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