javascript - Dynamically add a bootstrap 4 list item on button click

I am trying to add a bootstrap list item dynamically on button click. I am not sure how to add the item to the list so that it has the bootstrap classes that would make it styled like the hard coded list items.

Currently, the button is adding test content to the bottom of the list but I would like to have those items styled with the bootstrap classes. I don't have the input working yet as I am just trying to get the button part working first.

Does anyone know a way to do that?

Thank you.

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");

button.addEventListener("click", function() {
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("testing"));
  ul.appendChild(li);
})

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href=".1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <title>Zero To Mastery</title>
</head>

<body>

  <div class="container">
    <div class="row justify-center">
      <div class="col-12">
        <header>
          <h1>Shopping List</h1>

        </header>
        <div class="input-group mb-3">
          <input id="userinput" type="text" class="form-control" placeholder="add an item..." aria-label="Add an item" aria-describedby="basic-addon2">
          <div class="input-group-append">
            <button class="btn btn-outline-info" id="enter" type="button">Add</button>
          </div>
        </div>

      </div>
      <div class="col-12">
        <ul class="list-group">
          <li class="list-group-item">Jello</li>
          <li class="list-group-item">Spinach</li>
          <li class="list-group-item">Rice</li>
          <li class="list-group-item">Birthday Cake</li>
          <li class="list-group-item">Candles</li>
        </ul>
      </div>
    </div>
  </div>





  <!-- Scripts -->
  <script src=".3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src=".js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <script src=".1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
<script src=".1.0.js"></script>

</html>

Does anyone know a way to do that?

Thank you.

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");

button.addEventListener("click", function() {
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("testing"));
  ul.appendChild(li);
})

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <title>Zero To Mastery</title>
</head>

<body>

  <div class="container">
    <div class="row justify-center">
      <div class="col-12">
        <header>
          <h1>Shopping List</h1>

        </header>
        <div class="input-group mb-3">
          <input id="userinput" type="text" class="form-control" placeholder="add an item..." aria-label="Add an item" aria-describedby="basic-addon2">
          <div class="input-group-append">
            <button class="btn btn-outline-info" id="enter" type="button">Add</button>
          </div>
        </div>

      </div>
      <div class="col-12">
        <ul class="list-group">
          <li class="list-group-item">Jello</li>
          <li class="list-group-item">Spinach</li>
          <li class="list-group-item">Rice</li>
          <li class="list-group-item">Birthday Cake</li>
          <li class="list-group-item">Candles</li>
        </ul>
      </div>
    </div>
  </div>





  <!-- Scripts -->
  <script src="https://code.jquery./jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn./bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
<script src="https://code.jquery./jquery-3.1.0.js"></script>

</html>

Share Improve this question edited May 12, 2018 at 16:53 asked May 12, 2018 at 16:44 Joseph Romero 551 gold badge1 silver badge5 bronze badges

Add a ment |

5 Answers 5

Sorted by: Reset to default 8

Just add li.className = 'list-group-item'; and then remove

li.appendChild(document.createTextNode("testing"));

then add this line

  li.textContent = input.value;

then you will have the value of the input

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");

button.addEventListener("click", function() {
  var li = document.createElement("li");
  li.className = 'list-group-item';
  li.textContent = input.value;
  ul.appendChild(li);
})

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <title>Zero To Mastery</title>
</head>

<body>

  <div class="container">
    <div class="row justify-center">
      <div class="col-12">
        <header>
          <h1>Shopping List</h1>

        </header>
        <div class="input-group mb-3">
          <input id="userinput" type="text" class="form-control" placeholder="add an item..." aria-label="Add an item" aria-describedby="basic-addon2">
          <div class="input-group-append">
            <button class="btn btn-outline-info" id="enter" type="button">Add</button>
          </div>
        </div>

      </div>
      <div class="col-12">
        <ul class="list-group">
          <li class="list-group-item">Jello</li>
          <li class="list-group-item">Spinach</li>
          <li class="list-group-item">Rice</li>
          <li class="list-group-item">Birthday Cake</li>
          <li class="list-group-item">Candles</li>
        </ul>
      </div>
    </div>
  </div>





  <!-- Scripts -->
  <script src="https://code.jquery./jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn./bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
<script src="https://code.jquery./jquery-3.1.0.js"></script>

</html>

You just need to give the li the class list-group-item just like the other items.

var li = document.createElement("li");
li.className = "list-group-item";
li.appendChild(document.createTextNode("testing"));
ul.appendChild(li);

You can do it by adding li.classList.add("list-group-item"); to your javascript.

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");

button.addEventListener("click", function() {
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("testing"));
  li.classList.add("list-group-item");
  ul.appendChild(li);
})

You can add a class (or classes) to a HTML element this way:

li.classList.add("list-group-item");

I've also modified your code to use your input value, and cleared it after click :)

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");

button.addEventListener("click", function() {
  var li = document.createElement("li");
  // Add Bootstrap class to the list element
  li.classList.add("list-group-item");
  li.appendChild(document.createTextNode(input.value));
  ul.appendChild(li);
  // Clear your input 
  input.value = "";
})

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <title>Zero To Mastery</title>
</head>

<body>

  <div class="container">
    <div class="row justify-center">
      <div class="col-12">
        <header>
          <h1>Shopping List</h1>

        </header>
        <div class="input-group mb-3">
          <input id="userinput" type="text" class="form-control" placeholder="add an item..." aria-label="Add an item" aria-describedby="basic-addon2">
          <div class="input-group-append">
            <button class="btn btn-outline-info" id="enter" type="button">Add</button>
          </div>
        </div>

      </div>
      <div class="col-12">
        <ul class="list-group">
          <li class="list-group-item">Jello</li>
          <li class="list-group-item">Spinach</li>
          <li class="list-group-item">Rice</li>
          <li class="list-group-item">Birthday Cake</li>
          <li class="list-group-item">Candles</li>
        </ul>
      </div>
    </div>
  </div>





  <!-- Scripts -->
  <script src="https://code.jquery./jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn./bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
<script src="https://code.jquery./jquery-3.1.0.js"></script>

</html>

// If you want Jquery equivalent
    var button = $("#enter");
    var input = $("#userinput");
    var ul = $("ul");

    button.click(function() {
      var li = $("<li></li>").text(input.val());
      $(li).appendTo("ul").addClass('list-group-item');
    });

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Dynamically add a bootstrap 4 list item on button click - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)