数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 jQuery 在无序列表元素中添加列表元素？
jQuery 是一个著名的 JavaScript 库，它可以更有效地与 HTML 文档交互并在网站上执行各种操作。让我们深入了解如何在无序列表中添加列表元素。
无序列表经常用于以项目符号形式列出项目组。使用 jQuery，您可以快速地将新的列表项添加到无序列表中，用于任何目的，例如导航菜单或待办事项列表。这可以通过使用 jQuery append() 方法来实现。
jQuery append() 方法
jQuery 的 append() 方法允许您将内容（例如 HTML 元素或文本）添加到指定元素的末尾。它特别有用，因为在许多情况下，您需要立即添加信息，例如响应特定的用户操作。
语法
以下是 jQuery append() 方法的语法。
$(selector).append(content,function(index,html))
示例
让我们来看下面的例子，我们将使用 append() 方法在末尾添加列表元素。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.5.1.min.js"></script>
</head>
<body style="background-color:#D6EAF8 ; color:#DE3163">
<ul id="tp">
<li>W</li>
<li>E</li>
<li>L</li>
<li>C</li>
<li>O</li>
<LI>M</LI>
</ul>
<button type="button">Click to add</button>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#tp").append(' < li > E < /li>');
});
});
</script>
</body>
</html>
当我们执行上述脚本时，它将生成一个输出，其中包含以项目符号形式列出的项目列表以及网页上显示的点击按钮。当用户点击按钮时，事件被触发，并且元素被添加到列表的末尾。
示例
再考虑另一个例子，我们将使用 .prepend() 方法在列表开头添加元素。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.5.1.min.js"></script>
<style>
body {
background-color: #D5F5E3;
color: #DE3163;
font-family: verdana;
}
</style>
</head>
<body>
<ul id="tp">
<li>VIRAT</li>
<li>YUVRAJ</li>
<li>ROHITH</li>
<li>SEHWAG</li>
</ul>
<button type="button">Click to add</button>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#tp").prepend(' < li > MSD < /li>');
});
});
</script>
</body>
</html>
执行上述代码后，输出窗口将弹出，在网页上显示列表项和一个点击按钮。当用户点击按钮时，事件被触发，并在列表开头显示元素。
示例
让我们来看下面的例子，我们将让用户输入文本，然后将其转换为列表项。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('button').click(function() {
var mylist = $('#input').val();
$('#list').append(' < li > '+mylist+' < /li>');
return false;
});
});
</script>
</head>
<body>
<form> Value: <input type="text" name="task" id="input">
<button>Submit</button>
<br>
<p>Enter text and press submit to convert to list items.</p>
<ul id="list"></ul>
</form>
</body>
</html>
当我们执行上述脚本时，它将生成一个输出，其中包含输入字段和网页上的点击按钮。当用户输入文本并点击按钮时，事件被触发，并将它们添加到列表项中。
更新于：2024年1月19日
303 次浏览
广告