Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bolehkah jquery menambah elemen pada div?

Bolehkah jquery menambah elemen pada div?

青灯夜游
Lepaskan: 2022-04-21 13:09:49
asal
5046 orang telah melayarinya

jquery boleh menambah elemen pada div Kaedah: 1. Gunakan "$("div").append(elemen baharu)" untuk menambah elemen baharu pada hujung div. 2. Gunakan "$ (new elemen).appendTo("div")" pernyataan; 3. Gunakan "$("div").prepend(elemen baharu)".

Bolehkah jquery menambah elemen pada div?

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.

jquery boleh menambah elemen pada div.

Menambah elemen pada div bermakna menambah subelemen pada div menyediakan pelbagai kaedah untuk menambah subelemen Artikel ini akan memperkenalkannya kepada anda.

4 cara untuk menambah elemen anak pada div menggunakan jquery

Kaedah 1: Gunakan kaedah append()

Gunakan kaedah append() untuk menambah elemen anak pada "hujung" di dalam elemen div.

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 newp = "<p>一个新段落</p>";
                $("div").append(newp);
            })
        })
    </script>
	</head>
	<body>
		<div style="background-color: #FF0000;">
			<p>第一段文本</p>
			<p>第二段文本</p>
			<p>第三段文本</p>
		</div>
		<input id="btn" type="button" value="插入" />
	</body>
</html>
Salin selepas log masuk

Bolehkah jquery menambah elemen pada div?

Kaedah 2: Gunakan kaedah appendTo()

appendTo( ) juga Anda boleh menambah sub-elemen pada "end" di dalam elemen div Walaupun kedua-dua kaedah

appendTo() dan append() mempunyai fungsi yang serupa, objek operasinya diterbalikkan.

Sintaks:

$(A).appendTo(B)
Salin selepas log masuk

bermaksud memasukkan A di hujung B.

Contoh:

$(function () {
	$("#btn").click(function () {
		var newp = "<p>一个新段落</p>";
		$(newp).appendTo("div");
		
	})
})
Salin selepas log masuk

Bolehkah jquery menambah elemen pada div?

Kaedah 3: Gunakan prepend( )

prepend( ) kaedah boleh menambah elemen anak pada "permulaan" di dalam elemen div.

Sintaks:

$(A).prepend(B)
Salin selepas log masuk

bermaksud memasukkan B pada permulaan A.

Contoh:

$(function () {
	$("#btn").click(function () {
		var newp = "<p>一个新段落</p>";
		$("div").prepend(newp);
	})
})
Salin selepas log masuk

Bolehkah jquery menambah elemen pada div?

Kaedah 4: Gunakan prependTo( )

prependTo() juga boleh menambah elemen anak pada "permulaan" di dalam elemen div.

Walaupun kedua-dua kaedah prependTo( ) dan prepend( ) mempunyai fungsi yang sama, objek operasinya diterbalikkan.

Sintaks:

$(A).prependTo(B)
Salin selepas log masuk

bermaksud memasukkan A ke dalam permulaan B.

Contoh:

$(function () {
	$("#btn").click(function () {
		var newp = "<p>一个新段落</p>";
		$(newp).prependTo("div");
		
	})
})
Salin selepas log masuk

Bolehkah jquery menambah elemen pada div?

[Pembelajaran yang disyorkan: tutorial video jQuery, video bahagian hadapan web]

Atas ialah kandungan terperinci Bolehkah jquery menambah elemen pada div?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan