Tambahkan div ke javascript div yang ada

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" );

1

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" );

Jika 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;");

elem.setAttribute("style","width: 500px; background-color: yellow;");

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;");

elem.setAttribute("style","width: 500px; background-color: yellow;");

elem.setAttribute("style","width: 500px; background-color: yellow;");

Selanjutnya, dua properti CSS disetel menggunakan properti style elemen.

elem.setAttribute("style","width: 500px; background-color: yellow;");

elem.setAttribute("style","width: 500px; background-color: yellow;");

elem.setAttribute("style","width: 500px; background-color: yellow;");

Selanjutnya,

elem.setAttribute("style","width: 500px; background-color: yellow;");

elem.setAttribute("style","width: 500px; background-color: yellow;");

Properti style diakses menggunakan

elem.style.width = "500px";

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;");

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)";

elem.setAttribute("style","width: 500px; background-color: yellow;");

elem.setAttribute("style","width: 500px; background-color: yellow;");

elem.setAttribute("style","width: 500px; background-color: yellow;");

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";

Bagaimana cara menambahkan div ke div di JavaScript?

Bagaimana cara menambahkan div baru secara dinamis dalam JavaScript?

Bagaimana cara menambahkan div sebelum div di JavaScript?

Bagaimana cara menambahkan konten ke div di JavaScript?