Bootstrap 4水平列表组刷新

<ul class="list-group">
  <a href="page1.html" class="list-group-item list-group-item-action">列表项1</a>
  <a href="page2.html" class="list-group-item list-group-item-action">列表项2</a>
  <a href="page3.html" class="list-group-item list-group-item-action">列表项3</a>
</ul>

<ul id="myList" class="list-group">
  <li class="list-group-item">列表项1</li>
  <li class="list-group-item">列表项2</li>
  <li class="list-group-item">列表项3</li>
</ul>

<button id="refreshBtn" class="btn btn-primary">刷新列表</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $('#refreshBtn').click(function() {
    // 更新列表内容
    $('#myList').empty();
    $('#myList').append('<li class="list-group-item">新的列表项1</li>');
    $('#myList').append('<li class="list-group-item">新的列表项2</li>');
    $('#myList').append('<li class="list-group-item">新的列表项3</li>');
  });
});
</script>