在按钮单击时动态添加引导程序4列表项

时间：2018-05-12 16:44:08

标签： javascript

我试图在按钮点击时动态添加引导列表项。我不知道如何将项添加到列表中，以便它具有引导类，使其像硬编码列表项一样。

目前，该按钮正在将测试内容添加到列表的底部，但我希望这些项目使用引导类进行样式设置。我没有输入工作，因为我只是想让按钮部分先工作。

有谁知道这样做的方法？

谢谢。

＆＃13;
＆＃13; 
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);
})
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：3)

只需添加 li.textContent = input.value; ，然后移除

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>

的值 

{{1}}
{{1}}

答案 1 :(得分：2)

您可以通过以下方式向HTML元素添加一个或多个类：

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

我们还修改了您的代码以使用您的input值，并在点击后将其清除：）

＆＃13;
＆＃13; 
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 = "";
})
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

您可以将li.classList.add("list-group-item");添加到您的javascript中。

＆＃13;
＆＃13; 
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);
})
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

// 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');
    });
相关问题
最新问题