Como posso adicionar um elemento após outro?

174

Eu tenho uma certa caixa de texto e quero adicionar uma div depois dela. Eu tentei a .append()função, mas isso apenas adiciona a div no elemento.

Por exemplo, eu tenho:

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

e eu quero mudar isso para:

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

— skerit
fonte

287

tente usar o after()método:

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

Documentação

— Rowan
fonte

8

Os métodos .after () e .insertAfter () executam a mesma tarefa.

— Rifat

7

Isso está correto, mas depende da maneira como você prefere codificá-lo. Normalmente, eu já selecionava a entrada '#bla' e adicionava o conteúdo extra posteriormente. Puramente minha preferência, porém, não tenho certeza se um dos métodos tem algum benefício de velocidade.

— Rowan

37

experimentar

.insertAfter()

aqui

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

— Rifat
fonte

17

Seu código não deve ser mais parecido $('<div id="space"></div>').insertAfter('#bla')ao invés de $('#bla').insertAfter(content);?

— Rowan

6

Antes de tudo, o inputelemento não deve ter uma tag de fechamento (em http://www.w3.org/TR/html401/interact/forms.html#edef-INPUT : Tag final: proibida).

Segunda coisa, você precisa da função after(), não append().

— ingênuos
fonte

Correto, mas é o que acontece quando tento a função .append ().

— Skerit

2

Se for XHTML, o elemento de entrada deve ser fechado (mas não com uma tag final).

— 11388 CiscoIPPhone

2

Em HTML4 <input>não deve ser fechado.

— Derek朕會功夫

1

JQuery resolvido: adicionar elemento após outro elemento

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

OU

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

— Ashar Zafar
fonte

2

Isto está incorreto. Isso acrescenta o elemento ao elemento pai, assim como o OP indicado. Considere ler a pergunta novamente e revisar sua resposta.

— Evan Wieland