資料結構
網路
關係資料庫管理系統 (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.jquery.com/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.jquery.com/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.com/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 次瀏覽
廣告