Sisipan nod DOM jQuery
Dalam bab terakhir, kami juga mempunyai pemahaman awal tentang beberapa operasi pada nod Sekarang mari kita belajar untuk memasukkan
Ia tidak cukup untuk mencipta elemen secara dinamik. kita perlu meletakkan dokumen halaman dan memberikannya. Jadi persoalannya, bagaimana untuk memasukkannya ke dalam dokumen?
Ini melibatkan hubungan kedudukan Ia adalah perkara biasa untuk meletakkan elemen yang baru dicipta ini di dalamnya sebagai elemen anak unsur tertentu pada halaman. Untuk pemprosesan sedemikian, jQuery mentakrifkan dua kaedah operasi
tambah: Operasi ini berkaitan dengan melaksanakan kaedah appendChild asli pada elemen yang ditentukan dan menambahkannya pada dokumen serupa.
tambahkepada: Sebenarnya, menggunakan kaedah ini membalikkan operasi $(A).tambah(B) konvensional, iaitu, bukannya menambahkan B ke A, menambahkan A ke B.
Nota: Kedua-dua kaedah append() dan .appendTo() mempunyai fungsi yang sama Perbezaan utama ialah sintaks - lokasi kandungan dan sasaran adalah berbeza
Append() ialah. didahului oleh objek yang disisipkan, diikuti dengan kandungan elemen yang akan dimasukkan ke dalam objek
appendTo() didahului oleh kandungan elemen yang akan dimasukkan, dan diikuti dengan objek yang dimasukkan
Mari jelaskan secara terperinci dengan contoh:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style>
.content {
width: 300px;
}
.append{
background-color: blue;
}
.appendTo{
background-color: red;
}
</style>
</head>
<body>
<button id="bt1">append添加</button>
<button id="bt2">appendTo添加</button>
<div class="content"></div>
<script type="text/javascript">
$("#bt1").on('click', function() {
//.append(), 內(nèi)容在方法的后面，
//參數(shù)是將要插入的內(nèi)容。
$(".content").append('<div class="append">php 中文網(wǎng)</div>')
})
</script>
<script type="text/javascript">
$("#bt2").on('click', function() {
//.appendTo()剛好相反，內(nèi)容在方法前面，
//無論是一個(gè)選擇器表達(dá)式 或創(chuàng)建作為標(biāo)記上的標(biāo)記
//它都將被插入到目標(biāo)容器的末尾。
$('<div class="appendTo">php.cn</div>').appendTo($(".content"))
})
</script>
</body>
</html>
