亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

將列表中的項目顯示到 div 中

將列表中的項目顯示到 div 中

江戶川亂折騰 2023-10-10 15:00:25
我有兩個 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>
查看完整描述

2 回答

?
翻閱古今

TA貢獻1780條經驗 獲得超5個贊

你可以這樣做:


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



查看完整回答
反對 回復 2023-10-10
?
收到一只叮咚

TA貢獻1821條經驗 獲得超5個贊

我嘗試使用 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>

并使用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>


查看完整回答
反對 回復 2023-10-10
  • 2 回答
  • 0 關注
  • 113 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號