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

Respostas:

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