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

Question

我有两个 div 标签，里面有列表。

使用 Javascript，我尝试将“intoleranceList”中的每个项目放入字符串中，然后将其显示在“info”div 标记中。有人可以帮忙吗？这是我的 Javascript 试图做到这一点。

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

你可以这样做：const intolanceList = document.querySelectorAll("#intoleranceList > ul > li");//only select li's inside a ul tag and inside a intoleranceList idconst info = document.getElementById("info");const text = [];intolanceList.forEach(i => {&nbsp; 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

我尝试使用 Javascript ES5 来实现这一点：window.onload = function () {&nbsp; var intoleranceList = document.querySelectorAll('#intoleranceList li');&nbsp; var intoleranceListStrings = getStringListFromLi();&nbsp; &nbsp; AddStringsToInfo(intoleranceListStrings);&nbsp; function AddStringsToInfo(arr) {&nbsp; &nbsp; var infoElement = document.getElementById('info');&nbsp; &nbsp; infoElement.textContent = arr.join(',');&nbsp; }&nbsp; function getStringListFromLi(){&nbsp; &nbsp; var intoleranceListStrings = [];&nbsp; &nbsp; for(var i=0;i<intoleranceList.length;i++){&nbsp; &nbsp; &nbsp; intoleranceListStrings.push(intoleranceList[i].textContent);&nbsp; &nbsp; }&nbsp; &nbsp; return intoleranceListStrings;&nbsp; &nbsp; }}<div id="intoleranceList">&nbsp; <ul class="list">&nbsp; &nbsp; <li>One</li>&nbsp; &nbsp; <li>Two</li>&nbsp; &nbsp; <li>Three</li>&nbsp; </ul></div><div id="nonIntoleranceList">&nbsp; <ul class="list">&nbsp; &nbsp; <li>One</li>&nbsp; &nbsp; <li>Two</li>&nbsp; &nbsp; <li>Three</li>&nbsp; </ul></div><div id="info"></div>并使用ES6window.onload =&nbsp; () => {&nbsp; const intoleranceList = document.querySelectorAll('#intoleranceList li');&nbsp; const AddStringsToInfo = (arr) =>&nbsp; {&nbsp; &nbsp; const infoElement = document.getElementById('info');&nbsp; &nbsp; infoElement.textContent = arr.join(',');&nbsp; }&nbsp; const getStringListFromLi = () => {&nbsp; &nbsp; const intoleranceListStrings = [];&nbsp; &nbsp; for(let i=0; i<intoleranceList.length ;i++){&nbsp; &nbsp; &nbsp; intoleranceListStrings.push(intoleranceList[i].textContent);&nbsp; &nbsp; }&nbsp; &nbsp; return intoleranceListStrings;&nbsp; &nbsp; }&nbsp; const intoleranceListStrings = getStringListFromLi();&nbsp; &nbsp; AddStringsToInfo(intoleranceListStrings);&nbsp;&nbsp;}<div id="intoleranceList">&nbsp; <ul class="list">&nbsp; &nbsp; <li>One</li>&nbsp; &nbsp; <li>Two</li>&nbsp; &nbsp; <li>Three</li>&nbsp; </ul></div><div id="nonIntoleranceList">&nbsp; <ul class="list">&nbsp; &nbsp; <li>One</li>&nbsp; &nbsp; <li>Two</li>&nbsp; &nbsp; <li>Three</li>&nbsp; </ul></div><div id="info"></div>