Pemilih, elemen, larik elemen, string HTML, atau objek jQuery;
Metode .after() dan .insertAfter() melakukan tugas yang sama. Perbedaan utamanya terletak pada sintaks—khususnya, dalam penempatan konten dan target. Dengan .after(), ekspresi pemilih sebelum metode adalah wadah setelah konten disisipkan. Sebaliknya, dengan .insertAfter(), konten mendahului metode, baik sebagai ekspresi pemilih atau sebagai markup yang dibuat dengan cepat, dan disisipkan setelah wadah target
Perhatikan HTML berikut
1
2
3
4
5
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
Kita dapat membuat konten dan menyisipkannya setelah beberapa elemen sekaligus
1
$( "<p>Test</p>" ).insertAfter( ".inner" );
_Setiap elemen
$( "<p>Test</p>" ).insertAfter( ".inner" );
_0 dalam mendapatkan konten baru ini1
2
3
4
5
6
7
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>
<p>Test</p>
</div>
Kami juga dapat memilih elemen pada halaman dan menyisipkannya setelah yang lain
1
$( "h2" ).insertAfter( $( ".container" ) );
_Jika sebuah elemen yang dipilih dengan cara ini dimasukkan ke satu lokasi di tempat lain di DOM, itu akan dipindahkan setelah target (tidak dikloning) dan set baru yang terdiri dari elemen yang dimasukkan dikembalikan
1
2
3
4
5
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
<h2>Greetings</h2>
Namun, jika ada lebih dari satu elemen target, salinan kloning dari elemen yang disisipkan akan dibuat untuk setiap target setelah yang pertama, dan kumpulan baru itu (elemen asli ditambah klon) dikembalikan
Sebelum jQuery 1. 9, kasus append-to-single-element tidak membuat set baru, melainkan mengembalikan set asli yang membuatnya sulit untuk menggunakan metode
$( "<p>Test</p>" ).insertAfter( ".inner" );
1 dengan andal saat digunakan dengan jumlah elemen yang tidak diketahuiJika Anda hanya memodifikasi satu properti, Anda dapat mengubah setelan CSS secara langsung menggunakan properti style elemen
var elem = document.getElementById("elem"); elem.style.width = "500px";Jika Anda mengubah satu atau beberapa nilai, Anda dapat menggunakan metode setAttribute elemen
elem.setAttribute("style","width: 500px; background-color: yellow;");_Properti CSS elemen dapat dimodifikasi dalam JavaScript menggunakan salah satu dari dua pendekatan. Seperti yang ditunjukkan oleh solusi, pendekatan paling sederhana adalah menyetel nilai properti secara langsung menggunakan properti style elemen
elem.style.width = "500px";_Jika properti CSS berisi tanda hubung, seperti elem.setAttribute("style","width: 500px; background-color: yellow;");0 atau elem.setAttribute("style","width: 500px; background-color: yellow;");1, gunakan notasi CamelCase untuk properti
elem.style.fontFamily = "Courier"; elem.style.backgroundColor = "rgb(255,0,0)";Anda juga dapat menggunakan metode setAttribute elemen untuk menyetel properti gaya
elem.setAttribute("style","font-family: Courier; background-color: yellow");Namun, saat Anda menyetel properti gaya menggunakan setAttribute, ini akan menghapus nilai yang telah disetel sebelumnya di JavaScript
menunjukkan bagaimana teknik pengaturan gaya bekerja, termasuk dampak penggunaan setAttribute. Berbagai teknik digunakan untuk mengatur dan mendapatkan atribut gaya, termasuk pendekatan lintas-browser untuk mengakses gaya yang dihitung untuk atribut tersebut
Contoh 12-7.  Mendemonstrasikan setelan dan mengambil setelan gaya CSS
Changing style
testing
Segera setelah halaman dimuat, elemen elem.setAttribute("style","width: 500px; background-color: yellow;");_5 diakses menggunakan elem.setAttribute("style","width: 500px; background-color: yellow;");6, dan elem.setAttribute("style","width: 500px; background-color: yellow;");1 diambil menggunakan fungsi lintas-browser yang mendapatkan gaya komputasi untuk atribut. Keluaran pesannya adalah ârgb(0,255,0)â, mewakili warna kapur yang disetel di lembar gaya halaman
Selanjutnya, dua properti CSS disetel menggunakan properti style elemen. elem.setAttribute("style","width: 500px; background-color: yellow;");_9 dan elem.setAttribute("style","width: 500px; background-color: yellow;");1. Sekarang elemen elem.setAttribute("style","width: 500px; background-color: yellow;");_5 memiliki latar belakang kuning dan lebarnya 500, bukan 200 piksel. Kedua nilai yang dimodifikasi diakses dan dicetak, jadi kami dapat mengonfirmasi bahwa ya, nilainya telah berubah
Selanjutnya, elem.setAttribute("style","width: 500px; background-color: yellow;");0 untuk elemen disetel ke Courier, menggunakan notasi array, yang merupakan pendekatan lain yang dapat Anda gunakan untuk menyetel dan mendapatkan nilai properti gaya. Sekarang elemen elem.setAttribute("style","width: 500px; background-color: yellow;");_5 berukuran lebar 500 piksel, dengan latar belakang kuning, dan jenis fontnya adalah Courier
Properti style diakses menggunakan elem.style.width = "500px";_4. Serangkaian nilai yang ditetapkan menggunakan properti style dikembalikan untuk semua browser
color: purple; width: 500px; background-color: yellow; font-family: Courier;Warna font ungu diatur sebaris dalam atribut style di elemen elem.setAttribute("style","width: 500px; background-color: yellow;");5
Selanjutnya, saya menggunakan metode setAttribute untuk mengubah tinggi elemen. Beberapa hal terjadi ketika saya menggunakan metode setAttribute dalam contoh. Ketinggian elemen diubah menjadi 100 piksel, tetapi properti gaya yang ditetapkan sebelumnya (elem.style.fontFamily = "Courier"; elem.style.backgroundColor = "rgb(255,0,0)";0, elem.setAttribute("style","width: 500px; background-color: yellow;");9, elem.setAttribute("style","width: 500px; background-color: yellow;");1, dan elem.setAttribute("style","width: 500px; background-color: yellow;");0) telah âdihapus,â dan kembali ke pengaturan awal di lembar gaya, atau . Elemen sekarang memiliki lebar 200 piksel, tinggi 100 piksel, dengan latar belakang hijau, dan font kembali ke font default untuk browser (biasanya nilai serif), dan warna font default, hitam
Seperti yang Anda lihat, menggunakan setAttribute untuk mengubah properti elemen style dapat berdampak signifikan pada setelan sebelumnya, termasuk setelan CSS sebaris apa pun. Anda sebaiknya hanya menggunakan setAttribute jika Anda mengubah banyak nilai sekaligus, dan Anda tidak menggunakan atribut gaya sebaris apa pun atau belum mengubah setelan gaya elemen sebelumnya di aplikasi Anda
Efek yang ditunjukkan dalam resep ini berfungsi sama dengan semua browser target buku, kecuali IE7. Properti gaya adalah objek sebenarnya di IE7, jadi saat Anda mengakses gaya dengan elem.style.width = "500px";4, Anda akan mendapatkan objek, bukan string. Karena ini adalah objek, ini hanya dapat dibaca, yang berarti Anda tidak dapat menggunakan setAttribute dengan IE7