Rumah > Artikel > hujung hadapan web > Bolehkah jquery menambah elemen pada div?
Bolehkah jquery menambah elemen pada div?
- 青灯夜游asal
- 2022-04-21 13:09:375015semak imbas
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)".
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)
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>
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)
bermaksud memasukkan A di hujung B.
Contoh:
$(function () {
$("#btn").click(function () {
var newp = "<p>一个新段落</p>";
$(newp).appendTo("div");
})
})
Kaedah 3: Gunakan prepend( )
prepend( ) kaedah boleh menambah elemen anak pada "permulaan" di dalam elemen div.
Sintaks:
$(A).prepend(B)
bermaksud memasukkan B pada permulaan A.
Contoh:
$(function () {
$("#btn").click(function () {
var newp = "<p>一个新段落</p>";
$("div").prepend(newp);
})
})
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)
bermaksud memasukkan A ke dalam permulaan B.
Contoh:
$(function () {
$("#btn").click(function () {
var newp = "<p>一个新段落</p>";
$(newp).prependTo("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!