Método before
O método before adiciona texto antes do elemento
especificado. Também existe o método
insertBefore,
que funciona de maneira semelhante.
Sintaxe
Inserir texto antes de um elemento:
$(seletor).before(texto);
Desta forma, antes dos elementos selecionados será adicionado o texto que será retornado por uma função personalizada:
$(seletor).before(function(índiceNoConjunto));
Outra variante de uso da função, onde o segundo parâmetro define o valor HTML antigo do elemento:
$(seletor).before(function(índiceNoConjunto, stringHtml));
O texto também pode ser não apenas texto simples, mas também um elemento DOM ou um objeto jQuery. Neste caso, esses elementos serão movidos de sua posição original no código HTML.
Exemplo
Vamos inserir texto antes do parágrafo especificado:
<p id="test">text</p>
$('#test').before('!!!');
O código HTML ficará assim:
!!!<p id="test">text</p>
Exemplo
Vamos inserir texto com tags antes do parágrafo especificado:
<p id="test">text</p>
$('#test').before('<p>!!!</p>');
O código HTML ficará assim:
<p>!!!</p><p id="test">text</p>
Exemplo
Vamos colocar um parágrafo acima do outro (ou seja, recortar o parágrafo de sua posição antiga e colocá-lo em uma nova):
<p id="p1">text1</p>
<p id="p2">text2</p>
$('#p2').before($('#p1'));
O código HTML ficará assim:
<p id="p1">text1</p>
<p id="p2">text2</p>
Veja também
-
método
insertBefore,
que adiciona texto antes do elemento especificado -
métodos
after,append,prepend,
que permitem adicionar conteúdo em um local específico na página -
método
clone,
que cria cópias dos elementos selecionados
