极客教程jQuery 动态添加
到在 jQuery Mobile 中
在本文中，我们将介绍如何在 jQuery Mobile 中使用 jQuery 动态向一个无序列表（
）中添加列表项（
）。阅读更多：jQuery 教程
动态添加列表项
在 jQuery Mobile 中，我们可以使用 jQuery 的 append() 方法向一个
元素中添加新的
元素。这个方法会将新的 元素插入到元素的末尾。
下面是一个示例代码，展示了如何在点击一个按钮后，动态添加新的列表项到一个
元素中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile - 动态添加列表项</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>动态添加列表项</h1>
</div>
<div data-role="main" class="ui-content">
<ul data-role="listview" id="myList">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
<button id="addButton">添加列表项</button>
</div>
</div>
<script>
(document).on("pagecreate", function(){("#addButton").click(function(){
$("#myList").append("<li>新的列表项</li>");
});
});
</script>
</body>
</html>
在上面的示例中，我们首先创建了一个
元素，并添加了三个初始的
元素。然后，在页面加载完成后，使用 jQuery 的click() 方法给按钮添加了一个点击事件。在点击事件的回调函数中，我们使用 append() 方法向
元素中添加了一个新的
元素。总结
在本文中，我们学习了如何在 jQuery Mobile 中使用 jQuery 动态向一个无序列表中添加列表项。通过使用 append() 方法，我们可以轻松地在特定的事件触发时向列表中添加新的项。这对于展示动态数据或实现交互式功能非常有用。记得按照示例代码中的方式引入 jQuery Mobile 的库文件，并在事件回调函数中使用合适的选择器来选择要操作的元素。
希望本文对你学习 jQuery Mobile 中动态添加列表项的方法有所帮助！