Как добавить несколько <li></li> элементов в <ul>in jQuery

Question

Мне нужно добавить два имени в неупорядоченный список в jQuery без редактирования html или css.

My 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 Я пытаюсь добавить имена к

Это мой текущий вывод в браузере

Это очень Основы c упражнение после урока, на котором они только учили нас удалять и добавлять, поэтому другие найденные мной примеры слишком сложны, чтобы я мог их понять прямо сейчас. Кто-нибудь может дать ответ начального уровня?

Answer 1

Проблема в том, что .text('blubb') перезаписывает весь контент из <ul> с помощью "blubb". Вот почему в вашем случае вы видите только фамилию внутри <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, но если вы посмотрите на ванильное 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>