Как добавить список в начальной загрузке <li class = "list-group-item"> с помощью JavaScript

Question

Я пытался добавить список в Bootstrap, но он добавляет список за пределами моего кода начальной загрузки ..

Это выходное изображение, которое я получаю:

Код:

var title = document.getElementById('title');
var list = document.getElementById('list');
var li = list.getElementsByTagName('li');

var addBtn = document.getElementById('add-Btn');


for (var i = 0; i < li.length; i++) {
  list.addEventListener('click', activeItem);
}

function activeItem() {
  title.innerHTML = this.innerText;

  for (var i = 0; i < li.length; i++) {
    li[i].removeAttribute('class');
  }
  this.setAttribute('class', 'active');

}

addBtn.addEventListener('click', function() {
  var txt = prompt('Task to do is.....');
  list.innerHTML += '<li>' + txt + '</li>';

});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<ul id='list' class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>

</ul>

Я ценю любые советы!

Answer 1

Попробуйте:

var title = document.getElementById('title');
var list = document.getElementById('list');
var li = list.getElementsByTagName('li');
var addBtn = document.getElementById('add-Btn');
for (var i = 0; i < li.length; i++) {
  list.addEventListener('click', activeItem);
}
function activeItem() {
  title.innerHTML = this.innerText;
  for (var i = 0; i < li.length; i++) {
    li[i].removeAttribute('class');
  }
  this.setAttribute('class', 'active');
}
addBtn.addEventListener('click', function() {
  var txt = prompt('Task to do is.....');
  list.innerHTML += '<li class="list-group-item">' + txt + '</li>';
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" type="text/css" />

<div class="card" style="width: 300px; margin: 25px auto;">
  <div class="card-header">
    <h1 id="title">
      TO DO LIST
    </h1>
    <button type="button" class="btn btn-warning" id="add-Btn">Add To Task</button>
  </div>
  <ul class="list-group" id="list">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>

Answer 2

Вы должны добавить li с list-group-item классом:

var list = document.getElementById('list');
var addBtn = document.getElementById('add-Btn');

addBtn.addEventListener('click', function(){
  var txt = prompt('Task to do is.....');
  list.innerHTML += '<li class="list-group-item">' + txt + '</li>';
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<button id="add-Btn" class="mb-2">Add item</button>

<ul id='list' class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
 </ul>