I have some spans inside my content, and I'd like to get the content of each of them and display it in a list.

Can anybody help me with this? Thanks.

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);
}

<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 >footnote 1</span> asperitate nimia cuncta foedabat. propinquitate <span >footnote 2</span> enim Excogitatum est super his<span >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>

CodePudding user response：

You could do it like this:

$("#container span").each(function() {
  var text = $(this).text();
  $("<li>").text(text).appendTo("#footnotes");
});

This will find all span in the element with id container, then it will append a li element with the text of the span inside it.

Demo

$("#container span").each(function() {
  var text = $(this).text();
  $("<li>").text(text).appendTo("#footnotes");
});

<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 >footnote 1</span> asperitate nimia cuncta foedabat. propinquitate <span >footnote 2</span> enim Excogitatum est super his<span >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>

CodePudding user response：

1. Use either jQuery or raw JavaScript, but not both. It's confusing to have some native elements and some jQuery objects in a function, and sometimes it just doesn't work. You really don't need jQuery for something like this anyway. See https://youmightnotneedjquery.com.

2. The find() function returns only the first element that matches. Also, it's intended to accept a filter function, not a selector string. You want querySelectorAll().

3. There's no element with ID footnotes in your markup. You need to either include it or create it with JavaScript.

Bonus protip: If you use single quotes for JavaScript and double quotes for HTML (including HTML attributes inside JavaScript) you'll rarely have the need to escape quote characters. The nice thing is that most developers use double quotes for HTML, so you'll be consistent.

const containerEl = document.getElementById('container');
const textEls = containerEl.querySelectorAll('.footnote');
const outputListEl = document.createElement('ul');

textEls.forEach(textEl => {
  const listItemEl = document.createElement('li');
  listItemEl.textContent = textEl.innerText;

  outputListEl.appendChild(listItemEl);
});

containerEl.appendChild(outputListEl);

<div id="container">
  Post emensos insuperabilis expeditionis eventus <span >footnote 1</span> asperitate nimia cuncta foedabat. propinquitate <span >footnote 2</span> enim Excogitatum est super his<span >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>