我试图在按钮点击时动态添加一个 Bootstrap 列表项。但是,我不确定如何将该项添加到列表中,以便它具有 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>