Come posso aggiungere un elemento dopo un altro elemento?

174

Ho una determinata casella di testo e dopo voglio aggiungere un div. Ho provato la .append()funzione, ma questo aggiunge solo il div nell'elemento.

Ad esempio, ho:

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

e voglio cambiarlo in:

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

— skerit
fonte

289

prova ad usare il after()metodo:

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

Documentazione

— Rowan
fonte

8

I metodi .after () e .insertAfter () eseguono la stessa attività.

— Rifat,

7

È corretto, ma dipende dal modo in cui preferisci codificarlo. Normalmente avrei già selezionato l'input "#bla", e successivamente avrei aggiunto il contenuto extra. Puramente la mia preferenza, però, non sono sicuro che entrambi i metodi abbiano un vantaggio in termini di velocità.

— Rowan,

37

provare

.insertAfter()

Qui

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

— Rifat
fonte

17

Il tuo codice non dovrebbe essere più simile $('<div id="space"></div>').insertAfter('#bla')piuttosto che $('#bla').insertAfter(content);?

— Rowan,

6

Innanzitutto, l' inputelemento non dovrebbe avere un tag di chiusura (da http://www.w3.org/TR/html401/interact/forms.html#edef-INPUT : tag di fine: vietato).

In secondo luogo, è necessario after(), non append()funzione.

— naivists
fonte

Corretto, ma è quello che succede quando provo la funzione .append ().

— skerit,

2

Se è XHTML, l'elemento di input dovrebbe essere chiuso (ma non con un tag di fine).

— CiscoIPPhone

2

In HTML4 <input>non dovrebbe essere chiuso.

— Derek 朕會功夫

1

Risolto jQuery: aggiungi elemento dopo un altro elemento

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

O

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

— Ashar Zafar
fonte

2

Questo non è corretto Questo aggiunge l'elemento all'interno dell'elemento genitore, proprio come indicato nell'OP. Valuta di rileggere la domanda e di rivedere la tua risposta.

— Evan Wieland,