Dynamically add a bootstrap 4 list item on button click

dynamically add list items html
closable list items bootstrap
javascript add remove list items
add and remove html elements dynamically with javascript
bootstrap list
create ul li dynamically javascript
bootstrap list with icons
bootstrap list-group with image

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

How to Bind Click Event to Dynamically Created Elements in jQuery, To bind the click event to all existing and future elements, use the jQuery on() method. Let's take a look at Elements</title>; <script src="https://code.jquery.​com/jquery-1.12.4.min.js"></script> <p>Click the above button to dynamically add new list items. You can remove it Advertisements. Bootstrap UI Design Templates  How to add active class on click event in custom list group in Bootstrap 4 ? In Bootstrap 4, Javascript or jQuery events are used to add active class on click event in custom list group. Syntax:

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

</html>

Dynamically Add/Remove Items From List JavaScript , by MemoryNotFound · November 4, 2016 This tutorial shows how to dynamically add and/or remove items from a list using JavaScript. item</button​> <button onclick="removeItem()">remove item</button> <script  It works fine when I click on dynamic list, but the problem is the popover should be show up when click the button, not on the li. In the Demo, the first and second lis and buttons work correctly. Would you please tell me how to change the code when click on li button and popover show up after the third li. Thanks your help. – user2150267 Jun

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

</html>

List group · Bootstrap, How do you bind a click event in jQuery for dynamically added HTML element? handle bootstrap list-group click. I'm stuck with html/JS and have no idea how I should handle some events. For example I have a list-group: What I want to do is: 1)change active elements on click. 2)call JS function when element is clicked. UPD: So now I know that click events can be handled with JQuery thing.

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);
})

Formatting Lists with Bootstrap 4, How you can add badge to list group in bootstrap? Bootstrap example of Dynamic Form Fields - Add & Remove using HTML, Javascript, jQuery, and CSS. Snippet by cgrdavies High quality Bootstrap 2.3.2 Snippet by cgrdavies.

Add badges component to Bootstrap list group item, How to Align Navbar Items to Center using Bootstrap 4 ? How to hide In Bootstrap 4, Javascript or jQuery events are used to add active class on click event in custom list group. How to create button dynamically with click event in Angular ? add remove input fields dynamically using jquery, jquery add more fields example, dynamic form fields - add & remove bootstrap example code ItSolutionStuff.com Toggle navigation

How to add active class on click event in custom list group in , I'm trying to add the ability to dynamically add form elements to my form and where when you click the add button, another row shows up with two text inputs and not just one. I found explanations on the div sizes for text inputs and have changed <ul class="list-unstyled list-inline"> <li class="dropdown  This tutorial shows how to dynamically add and/or remove items from a list using JavaScript. create new element: We can dynamically create new elements using the document.createElement function. append element: We can append elements

Bootstrap: adding pairs of form elements dynamically with a button , Bootstrap example of Dynamic Form Fields - Add & Remove using HTML, Javascript, jQuery, and CSS. Snippet by cgrdavies. The Modal is a popup window or dialog box that displayed over the current web page. It is very useful to display HTML content/elements on a single page. If your web application uses Bootstrap, the modal popup can be easily implemented on the web pages.