masukkan jQuery insertAfter() dan insertBefore()

Sama seperti pemprosesan sisipan dalaman, jQuery telah menambah dua kaedah baharu, insertAfter dan insertBefore,

before() dan .insertBefore() disebabkan lokasi sasaran kandungan yang berbeza untuk mencapai fungsi yang sama. Perbezaan utama ialah sintaks - kandungan dan penempatan matlamat. Untuk before(), ungkapan pemilihan berada di hadapan fungsi, dan kandungan digunakan sebagai parameter, manakala .insertBefore() adalah sebaliknya, kandungan berada di hadapan kaedah, dan ia akan diletakkan di hadapan daripada elemen dalam parameter

after() dan .insertAfter () mencapai fungsi yang sama. Perbezaan utama ialah sintaks - khususnya penempatan kandungan dan sasaran (disisipkan). Untuk after() ungkapan pemilihan berada di hadapan fungsi, dan parameter ialah kandungan yang akan dimasukkan. Untuk .insertAfter(), Sebaliknya, jika kandungan berada di hadapan kaedah, ia akan diletakkan selepas elemen dalam parameter

sebelum, selepas dan masukkanSebelumnya. Sebagai tambahan kepada perbezaan dalam sasaran dan kedudukan, insertAfter tidak menyokong pemprosesan berbilang parameter

Nota:

insertSetelah memasukkan elemen berkapsul JQuery di belakang elemen yang ditentukan, maka gerakkan elemen berikut kembali, dan kemudian masukkan objek JQuery

sisipkanSebelum memasukkan elemen berkapsul JQuery di hadapan elemen yang ditentukan, kemudian pindahkan elemen sebelumnya Pindahkan, kemudian masukkan objek JQuery;bahagian seterusnya

fail baharu

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8" />
 <title></title>
 <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
 <style>
 .test1 {
 background: #bbffaa;
 }
 
 .test2 {
 background: yellow;
 }
 </style>
</head>

<body>
 <button id="bt1">insertBefore添加元素</button>
 <button id="bt2">insertAfter添加元素</button>
 <div class="aaron">
 <p class="test1">php 中文网</p>
 </div>
 <div class="test2">php.cn</p>
 </div>
 <script type="text/javascript">
 $("#bt1").on('click', function() {
 //在test1元素前后插入集合中每个匹配的元素
 //不支持多参数
 $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))
 })
 </script>
 <script type="text/javascript">
 $("#bt2").on('click', function() {
 //在test2元素前后插入集合中每个匹配的元素
 //不支持多参数
 $('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))
 })
 </script>
</body>

</html>

serahkan Tetapkan Semula Kod

Operasi automatik

Skrin penuh