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(), 内容在方法的后面，
//参数是将要插入的内容。
$(".content").append('<div class="append">php 中文网</div>')
})
</script>
<script type="text/javascript">
$("#bt2").on('click', function() {
//.appendTo()刚好相反，内容在方法前面，
//无论是一个选择器表达式 或创建作为标记上的标记
//它都将被插入到目标容器的末尾。
$('<div class="appendTo">php.cn</div>').appendTo($(".content"))
})
</script>
</body>
</html>