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>

— skerit
źródło

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,