Jak mogę dodać element po innym elemencie?

174

Mam określone pole tekstowe i chcę dodać po nim element div. Wypróbowałem tę .append()funkcję, ale to tylko dodaje element div do elementu.

Na przykład mam:

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

i chcę to zmienić na:

<input type="text" id="bla" /><div id="space"></div>
html jquery append insertafter skerit
źródło

Odpowiedzi:

287

spróbuj użyć after()metody:

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

Dokumentacja

Jarzębina
źródło
8
Metody .after () i .insertAfter () wykonują to samo zadanie.
Rifat
7
To prawda, ale zależy to od sposobu, w jaki wolisz go zakodować. Normalnie miałbym już wybrane wejście „#bla”, a potem dodawałbym dodatkową zawartość. Jednak czysto wolę, ale nie jestem pewien, czy którakolwiek z metod przynosi korzyści związane z szybkością.
Rowan
37

próbować

.insertAfter()

tutaj

$(content).insertAfter('#bla');
Rifat
źródło
17
Czy twój kod nie powinien być bardziej podobny $('<div id="space"></div>').insertAfter('#bla')niż $('#bla').insertAfter(content);?
Rowan
6

Przede wszystkim inputelement nie powinien mieć zamykającego tagu (z http://www.w3.org/TR/html401/interact/forms.html#edef-INPUT : End tag: forbidden).

Po drugie, potrzebujesz funkcji after(), a nie append().

naiwistów
źródło
Dobrze, ale tak się dzieje, gdy próbuję użyć funkcji .append ().
skerit
2
Jeśli jest to XHTML, element wejściowy powinien być zamknięty (ale nie tagiem końcowym).
CiscoIPPhone
2
W HTML4 <input>nie należy zamykać.
Derek 朕 會 功夫
1

Rozwiązany jQuery: Dodaj element po innym elemencie

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

LUB

<script type="text/javascript"> 
jQuery(document).ready(function(){
jQuery ( ".sidebar_cart" ) .append( "<a href='http://#'>Continue Shopping</a>" );
});
</script>
Ashar Zafar
źródło
2
To jest niepoprawne. Spowoduje to dołączenie elementu do elementu nadrzędnego, tak jak podano w OP. Rozważ ponowne przeczytanie pytania i zrewidowanie swojej odpowiedzi.
Evan Wieland,