获取 div 中 span 的内容并将其显示在列表中答案

【问题标题】：get content of spans in a div and display it in a list获取 div 中 span 的内容并将其显示在列表中
【发布时间】：2023-01-16 21:17:56
【问题描述】：

我的内容中有一些跨度，我想获取每个跨度的内容并将其显示在列表中。

这是我的内容：

    <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>

这是我想要得到的：

<ul id="footnotes">
<li>footnote 1</li>
<li>footnote 2</li>
<li>footnote 3</li>
</ul>

我遇到了这段代码，我对其进行了一些更改，但它不起作用..

let container =
    $("#article-content");
let spans =
    container.find(".footnote");

let outputP = $("#footnotes");

for (let span of spans) {

    let listElem =
        document.createElement("li");
    listElem.textContent =
        span.html;
        
    outputP.appendChild(listElem);
}

有人可以帮我吗？谢谢

【问题讨论】：

标签： html jquery html-lists

【解决方案1】：

你可以这样做：

$("#container span").each(function() {
  $("#footnotes").append("<li>"+$(this).text()+"</li>")
});

这将在 ID 为 container 的元素中找到所有 span，然后它将附加一个带有跨度文本的 li 元素。

演示

$("#container span").each(function() {
  $("#footnotes").append("<li>"+$(this).text()+"</li>")
});

<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>

<ul id="footnotes">
</ul>

【讨论】：