Bagaimana untuk menambah elemen li dalam jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menambah elemen li dalam jquery

青灯夜游

Lepaskan： 2022-04-20 17:48:56

asal

5057 orang telah melayarinya

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")".

Bagaimana untuk menambah elemen li dalam jquery

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)

Salin selepas log masuk

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>

Salin selepas log masuk

Bagaimana untuk menambah elemen li dalam jquery

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)

Salin selepas log masuk

bermaksud memasukkan A di hujung B.

Contoh:

$(function () {
            $("#btn").click(function () {
                var $li = "<li>榴莲</li>";
                $($li).appendTo("ul");
            })
 })

Salin selepas log masuk

Bagaimana untuk menambah elemen li dalam jquery

Kaedah 3: Gunakan prepend( )

prepend( ) kaedah memasukkan kandungan "pada permulaan" di dalam elemen yang dipilih.

Sintaks:

$(A).prepend(B)

Salin selepas log masuk

bermaksud memasukkan B pada permulaan A.

Contoh:

$(function () {
$("#btn").click(function () {
	var $li = "<li>榴莲</li>";
	$("ul").prepend($li);
})
})

Salin selepas log masuk

Bagaimana untuk menambah elemen li dalam jquery

Kaedah 3: Gunakan prependTo( )

<🎜 Walaupun fungsi kedua-dua kaedah >prependTo() dan prepend() adalah serupa, kedua-duanya memasukkan kandungan ke dalam "permulaan" elemen yang dipilih, tetapi objek operasinya diterbalikkan.

Sintaks:

$(A).prependTo(B)

Salin selepas log masuk

bermaksud memasukkan A ke dalam permulaan B.

Contoh:

$(function () {
$("#btn").click(function () {
	var $li = "<li>西瓜</li>";
	 $($li).prependTo("ul");
})
})

Salin selepas log masuk

Bagaimana untuk menambah elemen li dalam jquery

[Pembelajaran yang disyorkan:

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!