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

我正在尝试在单击按钮时动态添加引导列表项。我不确定如何将该项目添加到列表中，以便它具有引导类，使其样式类似于硬编码的列表项。

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

有谁知道一种方法可以做到这一点？

谢谢。

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>

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

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

然后添加此行

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>

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

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

你可以通过在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);
})

您可以通过以下方式向 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>

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

相关内容

最新更新

热门标签：