J'ai le code suivant qui crée une balise li pour chaque élément de la boucle:

selectionList.forEach(selectionItem => {
        // create list for summary
        var selectionItemTag = document.createElement("li");
        selectionItemTag.innerHTML = selectionItem.textContent;
        summaryWidgetList.appendChild(selectionItemTag);

}

J'ai changé ma balise ul en div, et je ne veux plus qu'elle ajoute une balise "li", je veux juste créer une liste séparée par des virgules, par exemple: "item1, item2, item3" etc.

Je ne sais pas comment modifier ce code pour le faire à la place ...

0
Shtarley 26 oct. 2020 à 21:03

2 réponses

Meilleure réponse

Cette ?

var commaList = [...selectionList].map(el=>el.textContent).join(',')

Si vous souhaitez regrouper quelque chose ...:

const selectionList     = document.querySelectorAll('#some-items > span')
  ,   summaryWidgetList = document.getElementById('summary-Widget-List')
  ;
var commaList = [...selectionList].map(el=>
  {
  let LI_elm         = document.createElement("li")
  LI_elm.textContent = el.textContent
  summaryWidgetList.appendChild(LI_elm)
  return el.textContent
  }
  ).join(',')


console.log(' commaList =' ,commaList )
#some-items { display:none; }
<div id="some-items">
  <span>item1</span>
  <span>item2</span>
  <span>item3</span>
</div>

<ul id="summary-Widget-List"></ul>
2
Mister Jojo 26 oct. 2020 à 18:28

En supposant que votre élément div est le summaryWidgetList que vous avez mentionné dans votre extrait de code, je suggère:

summaryWidgetList.innerText = selectionList.map(selectionItem => selectionItem.textContent).join(', ');

La fonction map transformera votre tableau d'objets avec une propriété textContent en un tableau de chaînes. La fonction join joindra le tableau de chaînes avec le séparateur donné.

1
Dharman 26 oct. 2020 à 18:19