Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk menambah elemen li dalam jquery
Bagaimana untuk menambah elemen li dalam jquery
- 青灯夜游asal
- 2022-04-20 17:48:565110semak imbas
Kaedah untuk menambah elemen li: 1. Gunakan "$("ul").append(li elemen)"; 2. Gunakan "$(li elemen).appendTo("ul""; Gunakan "$("ul").prepend(li element)"; 4. Gunakan "$(li element).prependTo("ul")".
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.
Untuk menambah elemen li ialah menambah subelemen li di dalam elemen ul.
Dalam jquery, terdapat 4 cara untuk menambah elemen anak:
apend() dan appendTo(): sisipkan ke "end" di dalam elemen yang dipilih Kandungan
prepend( ) dan prependTo( ): Masukkan kandungan
Kaedah 1 ke "permulaan" di dalam elemen yang dipilih : Gunakan kaedah append()
Dalam jQuery, kita boleh menggunakan kaedah append() untuk memasukkan kandungan "pada penghujung" di dalam elemen yang dipilih.
Sintaks:
$(A).append(B)
bermaksud memasukkan B di hujung A.
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(function () {
$("#btn").click(function () {
var $li = "<li>香蕉</li>";
$("ul").append($li);
})
})
</script>
</head>
<body>
<ul>
<li>苹果</li>
<li>梨子</li>
<li>橘子</li>
</ul>
<input id="btn" type="button" value="插入" />
</body>
</html>
Kaedah 2: Gunakan kaedah appendTo()
Dalam jQuery, Walaupun kedua-dua kaedah appendTo() dan append() mempunyai fungsi yang serupa, kedua-duanya memasukkan kandungan "pada akhir" elemen yang dipilih, tetapi objek operasinya diterbalikkan.
Sintaks:
$(A).appendTo(B)
bermaksud memasukkan A di hujung B.
Contoh:
$(function () {
$("#btn").click(function () {
var $li = "<li>榴莲</li>";
$($li).appendTo("ul");
})
})
Kaedah 3: Gunakan prepend( )
prepend( ) kaedah memasukkan kandungan "pada permulaan" di dalam elemen yang dipilih.
Sintaks:
$(A).prepend(B)
bermaksud memasukkan B pada permulaan A.
Contoh:
$(function () {
$("#btn").click(function () {
var $li = "<li>榴莲</li>";
$("ul").prepend($li);
})
})
Kaedah 3: Gunakan prependTo( )
$(A).prependTo(B)bermaksud memasukkan A ke dalam permulaan B. Contoh:
$(function () {
$("#btn").click(function () {
var $li = "<li>西瓜</li>";
$($li).prependTo("ul");
})
})
tutorial video jQuery, video bahagian hadapan web]
Atas ialah kandungan terperinci Bagaimana untuk menambah elemen li dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!