单击按钮动态添加 Bootstrap 4 列表项

Question

单击按钮动态添加 Bootstrap 4 列表项

javascript

4

我试图在按钮点击时动态添加一个 Bootstrap 列表项。但是，我不确定如何将该项添加到列表中，以便它具有 Bootstrap 类，使其像硬编码的列表项一样有样式。

目前，按钮正在将测试内容添加到列表底部，但我想将这些项目使用 Bootstrap 类进行样式设置。由于我只是想先让按钮部分正常工作，因此尚未使输入正常工作。

有人知道如何实现吗？

谢谢。

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>

- Joseph Romero

5个回答

4

你只需要像其他项目一样给 li 添加类 list-group-item 即可。

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

- Nick Shvelidze

2

你可以通过在 JavaScript 中添加 li.classList.add("list-group-item"); 来实现。

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

- AlTheSwede

2

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

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

我还修改了您的代码，以使用您的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");
  // 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>

- Teknotica

1

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

- Swaroop

1

你能解释一下你的答案吗？ - AMC

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adel Elkhodary · Accepted Answer

只需添加 li.className = 'list-group-item';，然后删除即可。

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

然后添加这行代码。

  li.textContent = input.value;

那么你将会得到输入的值。

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>