Bagaimana saya bisa menambahkan elemen setelah elemen lain?

174

Saya memiliki kotak teks tertentu dan saya ingin menambahkan div setelahnya. Saya sudah mencoba .append()fungsinya, tetapi itu hanya menambah div pada elemen.

Sebagai contoh, saya punya:

<input type="text" id="bla" />

dan saya ingin mengubahnya menjadi:

<input type="text" id="bla" /><div id="space"></div>

— skerit
sumber

Jawaban:

289

coba gunakan after()metode ini:

$('#bla').after('<div id="space"></div>');

Dokumentasi

— Rowan
sumber

Metode .after () dan .insertAfter () melakukan tugas yang sama.

— Rifat

Itu benar, tetapi itu tergantung pada cara Anda lebih suka kode itu. Saya biasanya sudah memilih input '#bla', dan kemudian menambahkan konten tambahan sesudahnya. Tapi murni preferensi saya, saya tidak yakin apakah metode tersebut memiliki manfaat kecepatan.

— Rowan

mencoba

.insertAfter()

sini

$(content).insertAfter('#bla');

— Rifat
sumber

Bukankah seharusnya kode Anda lebih seperti $('<div id="space"></div>').insertAfter('#bla')bukan $('#bla').insertAfter(content);?

— Rowan

Pertama-tama, inputelemen tidak boleh memiliki tag penutup (dari http://www.w3.org/TR/html401/interact/forms.html#edef-INPUT : Tag akhir: dilarang).

Hal kedua, Anda membutuhkan after(), bukan append()fungsi.

— kenaifan
sumber

Benar, tapi itulah yang terjadi ketika saya mencoba fungsi .append ().

— skerit

Jika XHTML maka elemen input harus ditutup (tetapi tidak dengan tag akhir).

— CiscoIPPhone

Dalam HTML4 <input>tidak boleh ditutup.

— Derek 朕會功夫

Soal jQuery: Tambahkan elemen setelah elemen lain

<script>
$( "p" ).append( "<strong>Hello</strong>" );
</script>

ATAU

<script type="text/javascript"> 
jQuery(document).ready(function(){
jQuery ( ".sidebar_cart" ) .append( "<a href='http://#'>Continue Shopping</a>" );
});
</script>

— Ashar Zafar
sumber

Ini salah. Ini menambahkan elemen dalam elemen induk, seperti yang dinyatakan OP. Pertimbangkan membaca pertanyaan lagi dan merevisi jawaban Anda.

— Evan Wieland

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.

Licensed under cc by-sa 3.0 with attribution required.