我正在开发一个包含表单和列表的网络应用程序(待办事项列表)。每次用户提交表单时，提交的元素都会作为 li 添加到列表中。我知道如何向 ul 添加列表项。我的问题是我希望能够将新添加的 li 格式化为前一个。我正在使用 bootstrap 来完成该元素，它有自己的预定义类。所以我想在这些类中添加新的 li 。这是在线网络应用程序 http://pctechtips.org/apps/todo/ 这就是单个 li 的样子，因此当添加新的 li 时，我想知道如何保持相同的格式
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<i class="fa fa-trash-o" aria-hidden="true"></i>
</li>
//javascript file
//variables
//todoList array to hold (title, description) for every todo tiem
var todoList = [{
title: "Buy Groceries",
desc: "go to win-dixie and buy bread, ham, and cheese"
},
{
title: "Pay Car Insurance",
desc: "call State Farm and pay year insureance"
},
{
title: "Do this",
desc: "this is another todo item description"
}
]
/*
* Script main body
*/
$(document).ready(function() {
//hide form when doc loads first time
$("#submit-form").hide();
//listener for show hide form functionality
$("#add-todo").click(function() {
toggleForm();
return false; //return false to prevent page reload
});
//listener for add new item form (submit button)
$(".btn").click(function() {
console.log("submit item");
addToList();
});
});
//functionality for show / hide form
function toggleForm() {
if ($("#submit-form").is(":hidden")) {
console.log("form exapnded");
$("#submit-form").show("slow");
$("#form-icon").removeClass("fa-plus-square-o");
$("#form-icon").addClass("fa-minus-square-o");
} else {
console.log("form hidden");
$("#submit-form").hide("slow");
$("#form-icon").removeClass("fa-minus-square-o");
$("#form-icon").addClass("fa-plus-square-o");
}
}
//add new item to todo list items
function addToList() {
//getting data from input fields
var todoTitle = $("#todo-title").val();
var todoDesc = $("#todo-desc").val();
//checking user input
if (todoTitle == null || todoDesc == null) {
alert("fill in all fields!");
} else {
console.log(todoTitle + "\n" + todoDesc);
//adding new li to ul
var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode(todoTitle));
ul.appendChild(li);
// li.innerHtml = "<li class="list-group-item d-flex justify-content-between align-items-center">"+todoTitle+"<i class="fa fa-trash-o" aria-hidden="true"></i></li>"
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>TodoList App</title>
<!-- bootstrap, fontawsome cdn -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- local stylesheet -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- jquery cdn -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- local javascript -->
<script type="text/javascript" src="js/todo.js"></script>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-drak bg-dark mb-4">
<a class="navbar-brand" href="#"><i class="fa fa-thumb-tack" aria-hidden="true"></i> Todo<strong>List</strong></a>
</nav>
<!-- /navbar -->
<!-- todoList -->
<div class="container">
<div class="add-item text-white text-center col-sm-12 col-md-10 col-lg-8 mb-4">
<a id="add-todo" class="new-todo text-white text-center" href=""><i id="form-icon" class="fa fa-plus-square-o" aria-hidden="true"></i> Enter new todo item</a>
<div id="submit-form" class="form-hide text-center col-sm-12 col-md-12 col-lg-8">
<form class="">
<div class="form-group">
<input type="text" class="form-control" id="todo-title" placeholder="Todo Title">
</div>
<div class="form-group">
<input type="text" class="form-control" id="todo-desc" placeholder="Todo Description">
</div>
<button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
</form>
</div>
<!-- horizontal line -->
<hr>
<!-- list items -->
<h1 class="heading-4">Todo List Items</h1>
<ul id="list" class="list-group mt-4 pb-4">
<li class="list-group-item d-flex justify-content-between align-items-center">
<i class="fa fa-plus-square-o" aria-hidden="true"></i> Pay Car Insurance
<i class="fa fa-pencil" aria-hidden="true"></i>
<i class="fa fa-trash-o" aria-hidden="true"></i>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<i class="fa fa-trash-o" aria-hidden="true"></i>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<i class="fa fa-trash-o" aria-hidden="true"></i>
</li>
</ul>
</div>
</div>
</body>
</html>
最佳答案
您正在使用 Jquery。因此您可以使用它来添加类和附加子元素。
var ul = document.getElementById("list");
var li = document.createElement("li");
$(li).addClass("list-group-item d-flex justify-content-between align-items-center");
$(li).append(document.createTextNode(todoTitle));
$(li).append(($('<i class="fa fa-trash-o" aria-hidden="true"></i>')));
我唯一添加的是 addClass() 方法和append() 方法，用于添加所需的类并附加垃圾桶图标。
在这里检查 fiddle :Fiddle
希望对你有帮助!
关于javascript - 如何在 Javascript 中将列表项添加到无序列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48456091/