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>
html jquery append insertafter skerit
sumber

Jawaban:

289

coba gunakan after()metode ini:

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

Dokumentasi

Rowan
sumber
8
Metode .after () dan .insertAfter () melakukan tugas yang sama.
Rifat
7
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
37

mencoba

.insertAfter()

sini

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

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
2
Jika XHTML maka elemen input harus ditutup (tetapi tidak dengan tag akhir).
CiscoIPPhone
2
Dalam HTML4 <input>tidak boleh ditutup.
Derek 朕 會 功夫
1

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
2
Ini salah. Ini menambahkan elemen dalam elemen induk, seperti yang dinyatakan OP. Pertimbangkan membaca pertanyaan lagi dan merevisi jawaban Anda.
Evan Wieland