将列表中的项目显示到 div 中

Question

I have two div tags with lists inside.

Using Javascript I am trying to put each item from the "intoleranceList" into a string and then display it in the "info" div tag. Can anyone help? Here's my Javascript trying to do this.

 var area= document.getElementById("info"); var listArea = document.getElementById("intoleranceList").getElementsByTagName("li"); var intoleranceArray = []; for(let i = 0; i < listArea.length; i++) { intoleranceArray[i] = listArea[i].innerHTML; } var intoleranceString = intoleranceArray.toString(); area.innerHTML = intoleranceString;

 <div id = "intoleranceList"> <ul class = "list"> <li>One</li> <li>Two</li> <li>Three</li> </ul> </div> <div id = "nonIntoleranceList"> <ul class = "list"> <li>One</li> <li>Two</li> <li>Three</li> </ul> </div> <div id = "info"></div>

Answer 1

You can do something like this:

const intolanceList = document.querySelectorAll("#intoleranceList > ul > li");//only select li's inside a ul tag and inside a intoleranceList id
const info = document.getElementById("info");
const text = [];

intolanceList.forEach(i => {
  text.push(i.textContent)//catch every text and push to array
})

info.textContent = text.join(" ")//catch array and transform in string with spaces between itens

Answer 2

I tried to achieve this using Javascript ES5 :

 window.onload = function () { var intoleranceList = document.querySelectorAll('#intoleranceList li'); var intoleranceListStrings = getStringListFromLi(); AddStringsToInfo(intoleranceListStrings); function AddStringsToInfo(arr) { var infoElement = document.getElementById('info'); infoElement.textContent = arr.join(','); } function getStringListFromLi(){ var intoleranceListStrings = []; for(var i=0;i<intoleranceList.length;i++){ intoleranceListStrings.push(intoleranceList[i].textContent); } return intoleranceListStrings; } }

 <div id="intoleranceList"> <ul class="list"> <li>One</li> <li>Two</li> <li>Three</li> </ul> </div> <div id="nonIntoleranceList"> <ul class="list"> <li>One</li> <li>Two</li> <li>Three</li> </ul> </div> <div id="info"></div>

And using ES6

 window.onload = () => { const intoleranceList = document.querySelectorAll('#intoleranceList li'); const AddStringsToInfo = (arr) => { const infoElement = document.getElementById('info'); infoElement.textContent = arr.join(','); } const getStringListFromLi = () => { const intoleranceListStrings = []; for(let i=0; i<intoleranceList.length ;i++){ intoleranceListStrings.push(intoleranceList[i].textContent); } return intoleranceListStrings; } const intoleranceListStrings = getStringListFromLi(); AddStringsToInfo(intoleranceListStrings); }

 <div id="intoleranceList"> <ul class="list"> <li>One</li> <li>Two</li> <li>Three</li> </ul> </div> <div id="nonIntoleranceList"> <ul class="list"> <li>One</li> <li>Two</li> <li>Three</li> </ul> </div> <div id="info"></div>