如何追加多個<li></li>元素到<ul>在 jQuery 中

Question

我需要將兩個名稱附加到 jQuery 中的無序列表，而無需編輯 html 或 css。

我的 html 看起來像：

  <div class="col-md-6 yellow">
       <h2 id="yellowHeading">The Squad</h2>
       <ul id="yellowTeamList">

      </ul>
  </div>

我試過了：

$('#yellowTeamList').append('li').text('Joseph Banks');

$('#yellowTeamList').append('li').text('Simon Jones');

但它只附加了第二個名字“西蒙瓊斯”。

這是我嘗試過的代碼

這是我試圖將名稱添加到的 html

這是我當前在瀏覽器中的輸出

這是一節課后的非常基本的練習，他們只教我們刪除和附加，所以我發現的其他例子太先進了，我現在無法理解。 任何人都可以提供初學者級別的答案嗎？

Answer 1

問題是.text('blubb')用.text('blubb')覆蓋了<ul>所有內容。 這就是為什么在您的情況下，您只能在<ul>看到姓氏

但你幾乎做對了..試試這樣

 $('#yellowTeamList').append('<li>Joseph Banks</li>'); $('#yellowTeamList').append('<li>Simon Jones</li>');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-md-6 yellow"> <h2 id="yellowHeading">The Squad</h2> <ul id="yellowTeamList"> </ul> </div>

它只標記了 jQuery，但如果您查看 vanilla js 解決方案，它可能對您嘗試做的事情更有意義

 //$('#yellowTeamList').append('<li>Joseph Banks</li>'); //$('#yellowTeamList').append('<li>Simon Jones</li>'); var teamList = document.querySelector('#yellowTeamList'); var liOne = document.createElement('li'); liOne.innerHTML = 'Joseph Banks'; teamList.append(liOne); var liTwo = document.createElement('li'); liTwo.innerHTML = 'Simon Jones'; teamList.append(liTwo);

 <div class="col-md-6 yellow"> <h2 id="yellowHeading">The Squad</h2> <ul id="yellowTeamList"> </ul> </div>

現在您可能會認為這是很多代碼，但您會看到發生了相同的事情，因此您可以將重復的代碼放入一個函數中並將名稱放入一個數組中，然后它看起來像這樣：

 var teamList = document.querySelector('#yellowTeamList'); var writeNames = function(name) { var li = document.createElement('li'); li.innerHTML = name; teamList.append(li); }; ['Joseph Banks', 'Simon Jones'].forEach(name => writeNames(name));

 <div class="col-md-6 yellow"> <h2 id="yellowHeading">The Squad</h2> <ul id="yellowTeamList"> </ul> </div>