stackoom
  简体   繁体   中英

Dynamically add a bootstrap 4 list item on button click

 原文  2018-05-12 16:44:07  8   5    javascript

Question

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>

5 answers

solution1
 5  2018-05-12 17:03:59

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>

solution2
 3 ACCPTED  2018-05-12 16:57:26

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

solution3
 2  2018-05-12 17:02:24

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

solution4
 2  2018-05-12 17:07:04

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>

solution5
 0  2020-02-21 17:33:50

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question add item to list on button click js JavaScript: Add selected item to list on button click Adding Item in list dynamically on Button click .Help Please How to dynamically add vue bootstrap dropwdown list item? Cannot add click event to dynamically appended list item in jquery Add on click action for dynamically created list item and its contents How can I dynamically add a button to the last item in a list? Add / Remove <li> item to list when Clicking a button - Twitter Bootstrap My array list keeps outputing the same list item if I click the add button with empty input Add inputs dynamically when click on button in angular 4
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM