如何获取div内指定span元素的内容并以列表形式展示？

原代码存在的问题 #

• 容器选择器不匹配：JS代码里用$("#article-content")定位容器，但HTML中实际容器的id是container，导致无法获取目标元素
• DOM与jQuery API混用错误：遍历得到的span是原生DOM元素，不能直接调用span.html；outputP是jQuery对象，不能使用原生的appendChild方法
• 缺少输出目标容器：HTML中没有定义#footnotes元素，脚注列表无处挂载

修正后的完整代码 #

HTML部分（添加脚注列表容器）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
  Post emensos insuperabilis expeditionis eventus <span class="footnote">footnote 1</span> asperitate nimia cuncta foedabat. propinquitate <span class="footnote">footnote 2</span> enim Excogitatum est super his<span class="footnote">footnote 3</span>  adsistendo pervadendoque divites domus egentium habitu quicquid noscere poterant vel audire latenter intromissi per posticas in regiam nuntiabant, id observantes conspiratione concordi, ut fingerent quaedam et cognita duplicarent in peius, laudes vero
  supprimerent Caesaris, quas invitis conpluribus formido malorum inpendentium exprimebat.
</div>
<!-- 新增脚注列表容器 -->
<ol id="footnotes"></ol>

方案一：纯jQuery实现

// 定位正确的内容容器
const contentContainer = $("#container");
// 获取所有带footnote类的span元素
const footnoteSpans = contentContainer.find(".footnote");
// 定位脚注列表容器
const footnoteList = $("#footnotes");

// 遍历每个脚注元素，生成列表项
footnoteSpans.each(function(index) {
  // 创建列表项，添加序号和脚注内容
  const listItem = $("<li>").text(`${index + 1}. ${$(this).text()}`);
  // 将列表项追加到列表中
  footnoteList.append(listItem);
});

方案二：原生JavaScript实现（无需jQuery）

// 定位内容容器
const contentContainer = document.getElementById("container");
// 获取所有带footnote类的span元素
const footnoteSpans = contentContainer.querySelectorAll(".footnote");
// 定位脚注列表容器
const footnoteList = document.getElementById("footnotes");

// 遍历生成列表项
footnoteSpans.forEach((span, index) => {
  const listItem = document.createElement("li");
  listItem.textContent = `${index + 1}. ${span.textContent}`;
  footnoteList.appendChild(listItem);
});

关键修正说明 #

1. 统一选择器与HTML元素的id，确保能正确获取目标元素
2. 严格区分原生DOM API与jQuery API的使用方式，避免混用导致报错
3. 为脚注添加序号，让列表结构更清晰规范
4. 确保输出容器存在，保证脚注列表能正常渲染

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