Maven – Resolvendo erro ArtifactDescriptorException

E ai galeraaaa, blz?

Tive que formatar minha máquina… e quando abri meu eclipse me deparei com o erro:

ArtifactDescriptorException

Mesmo tendo todas as bibliotecas no lugar, por algum motivo o maven não as encontrava…

Dei uma pesquisada e achei a seguinte solução:
1 – Clique com o botão direito em cima do projeto
2 – Vá em Maven
3 – Clique em
Update Project
4 – Selecione a opção ‘
Force Update Snapshots/Releases
5 – Clique em ‘
OK.

Se você tiver bastante bibliotecas, demorará um pouco, após o termino do processo,
provavelmente seu projeto ja vai está com as bibliotecas ok…

abraços!

Fonte: Stackoverflow – Saman Abdolmohammad

SQL – Como inserir Date / Timestamp

E ai galera beleza?

Hoje segue um exemplo de como inserir Date / Timestamp no banco de dados…
possibilitando vc adicionar uma data, hora, minuto, segundo ou todos eles em uma
tabela do banco de dados (testado no Oracle XE) !!!

Para isso utilizamos o método/função:

TO_TIMESTAMP()

Segue abaixo alguns exemplos de utilização!!!

Utilizando uma variável:

INSERT INTO sua_tabela(sua_coluna) VALUES (TO_TIMESTAMP(:variavel_string,'YYYY-MM-DD HH24:MI:SS'));

Utilizando uma string de Hora/Minuto:

INSERT INTO sua_tabela(sua_coluna) VALUES (TO_TIMESTAMP('23:59','HH24:MI'));

Utilizando uma string de Data:

INSERT INTO sua_tabela(sua_coluna) VALUES (TO_TIMESTAMP('2014-06-13','YYYY-MM-DD'));

Utilizando a Data atual:

INSERT INTO sua_tabela(sua_coluna) VALUES (CURRENT_TIMESTAMP);

Fonte: Stackoverflow – reggie

Como centralizar DIV na VERTICAL e na HORIZONTAL

A arte de centralizar div tanto na horizontal quanto na vertical é discutida a anos pelos desenvolvedores Web, hoje apresentaremos uma das maneiras de centralizar uma div tanto na horizontal quanto na vertical.

Resolvi escrever este artigo depois que voltei a trabalhar com implementação e percebi que existem várias técnicas para centralizar o conteúdo e a maioria é ineficiente, porém neste artigo explicarei que como centralizar seu site com uma técnica simples e direta.

 

O HTML

Felizmente com o advento do Webstandards o HTML se mantém sempre é simples, independete do problema ou solução.

E através do CSS ou JavaScript conseguimos resolver a maioria dos problemas, o que na verdade é um grande alívio, pois dar manutenção no conteúdo no passado era um verdadeiro tormento, tendo que navegar em grandes emaranhados de código.

Agora veremos como ficará o HTML quando queremos centralizar uma div, lembrando que com esta técnica é possível centralizar sites complexos ou simples, de forma organizada e com simplicidade.

    <div id="divCentralizada">
       <p>
          conteúdo centralizada
       </p>
    </div>

O HTML acima nos da 3 elementos, a o <div> que será centralizada, o <p> que representa o conteúdo da página e o texto, apenas para ilustrar como seu conteúdo ficaria centralizado neste exemplo.

O CSS

No CSS iremos posicionar esta DIV (#divCentralizada) através do position: absolute;, ele fará com que a DIV deixe de respeitar o resto do conteúdo e passe a ter uma posição absoluta na página.

Agora que a div(#divCentralizada) esta alinhada independente do “resto”, com isso poderemos definir o top e o left que fará com que nossa DIV se afaste da margem interna do navegador.

Para ambos informaremos 50%, com isso as margens da DIV serão literalmente posicionadas ao centro da tela, veja o código:

<html>
  <header>
    <title>Exemplo 2 - OGENIAL!</title>
    <style>
      #divCentralizada {
        position: absolute;
        width: 600px;
        height: 300px;
        left: 50%;
        top:50%;
        background-color: gray;
      }
    </style>
  </header>
  <body>
    <div id="divCentralizada">
      <p>
        conte&uacute;do centralizada
      </p>
    </div>
  </body>
</html>

Como centralizar uma div

Como podemos ver, ele posicionou a “ponta” da div a 50% de distância da borda esquerda e o mesmo fez com o a borda superior da div que foi posicionada exatamente no meio da tela, porém esperamos que o alinhamento seja feito não através da extremidade da nossa DIV mãe e sim através do seu meio, o que devemos fazer agora é setar uma margem negativa com metade das dimensões da div, como no exemplo acima informamos o tamanho (width com 600px deveremos informar uma margem a esquerda com -300px; (300 negativo) desta forma ela ira recuar até que o centro da DIV fique no centro da tela.

Desta forma a DIV será posicionada primeiro a 50% da disância da margem e logo depois recuará 50% do seu tamanho, acertando exatamento o centro, o mesmo deverá ser feito com a margem superior como vemos no exemplo abaixo.

<html>
   <header>
      <title>Exemplo 2 - OGENIAL!</title>
      <style>
         #divCentralizada {
            position: absolute;
            width: 600px;
            height: 300px;
            left: 50%;
            top:50%;
            margin-left: -300px;
            margin-top: -150px;
            background-color: gray;
         }
      </style>
   </header>
   <body>
      <div id="divCentralizada">
         <p>
            conte&uacute;do centralizada
         </p>
      </div>
    </body>
</html>

Então com esta simples técnica conseguimos centralizar uma dív na tela obtendo o resultado abaixo.

DIV centralizada apartir do seu centro

Acredito que seja válido observar também que a DIV foi centralizada, porém o conteúdo permaneceu alinhado conforme o padrão da página, não atrapalhando assim o “resto” do layout.

Centralizar div em vários navegadores

Este processo é utilizado em diversos sites pelo mundo todo pois funciona no IE 6, IE 7, IE 8 e IE 9, FireFox (2,3) e Google Chrome.

Pois é, centralizar div`s no Internet Explorer foi sempre um problema, mas agora, com esta técnica esta muito mais fácil.

Porque não utilizar a tag <center> para centralizar o conteúdo

A algum tempo a tag <center> era muito utilizada em algumas técnicas para centralizar o conteúdo, porém com o advento do CSS e as novas preocupações dos webmaster`s a tag <center> deixou de ser utilizada e finalmente foi depreciada pela W3C, sendo agora descartada como técnica viável para centralização.

Fonte: ogenial.com.br

BigDecimal – Resolvendo o Erro: java.lang.ArithmeticException: Non-terminating decimal expansion; no exact representable decimal result.

E ai pessoal, beleza?

Me deparei com esse erro ao trabalhar com BigDecimal, e no meu caso,
como eu estou trabalhando com $$$ não é sempre uma boa fazer arredondamentos
no meio dos cálculos… podem resultar em alguns reais de diferença…

Erro no seguinte código:

BigDecimal a = newBigDecimal("1.6");
BigDecimal b = newBigDecimal("9.2");
a.divide(b);

Para resolver o erro apenas arredondando, faça da seguinte forma:

BigDecimal a = newBigDecimal("1.6");
BigDecimal b = newBigDecimal("9.2");
a.divide(b, 2, RoundingMode.HALF_UP);

Onde o “2”, é o número de cadas após o ponto… e o RoundingMode é o modo de arredondamento (existem diversos)!

Para resolver o erro SEM arredondar, faça da seguinte forma:

BigDecimal a = newBigDecimal("1.6");
BigDecimal b = newBigDecimal("9.2");
a.divide(b, MathContext.DECIMAL128);

Você pode escolher o número de bits que você quer entre 32, 64 ou 128…

Bom é isso ai pessoal… abraços!!!

Fonte: StackOverflow – DVK / MindBrain

Ordenando Lista de Objetos em Java

Pessoal, andei apanhando um pouco no trabalho, e achei essa solução, para ordenar um ArrayList,
segue abaixo o que salvou minha vida ahuahuahuaha :

Quem nunca na sua vida de programador, seja iniciando pela linguagem de programação C ou direto pelo Java, não enfrentou alguns problemas com Segmentation fault e NullPointException ao trabalhar-se com vetores, principalmente por se acessar índices que não existiam. Na linguagem de programação C não existe muita escapatória para esses casos, além de implementar toda a lógica para a manipulação desses vetores. Um dos exercícios clássicos em C é o de ordenar um vetor em ordem crescente ou decrescente, utilizando-se de alguma lógica com fors e ifs.

Ao iniciar o estudo em Java, também aprendemos a utilizar primeiramente os vetores e enfrentamos os mesmos problemas que no C, até fazemos os mesmos exercícios já feitos em C sobre vetores. Mas ai pensamos, Java sendo uma linguagem de mais alto nivel que o C, será que não existe uma solução mais elegante? A resposta vem da Collections Framework, que é uma API robusta criada pela Sun que possui diversas classes que representam estruturas de dados avançadas, como ArrayList e LinkedList, e funções úteis para se trabalhar com vetores.

O objetivo desse artigo não é dar toda explicação de como utilizar a sintaxe da API Collections, sendo os dois primeiros parágrafos uma breve introdução sobre o assunto, mas sim de como ordenar uma lista de objetos em Java sem ter que implementar nenhuma lógica mirabolante. Uma lista de objetos em Java pode ser facilmente ordenada utilizando o método sort da API Collections. Como exemplo iremos criar uma lista de strings e adicionar algumas palavras nela, depois iremos imprimir essa lista para ver sua ordem. Depois executaremos o método sort para ordenar a lista e imprimiremos novamente a lista para comparar o resultado.

List<String> lista = new ArrayList<String>();
lista.add("fogo");
 lista.add("agua");
 lista.add("vento");
 lista.add("terra");
for(String i : lista){
 System.out.println(i);
 }
Collections.sort(lista);
 System.out.println("Ordenando a lista:");
for(String i : lista){
 System.out.println(i);
 }

Resultado:

fogo
agua
vento
terra
Ordenando a lista:
agua
fogo
terra
vento

Como pode ser visto acima, a lista foi reordenada em ordem crescente. Mas como o método sort sabia como organizar a lista? Ele precisa utilizar um método int compareTo(Object) para poder ordenar a lista, que retorna zero, se o objeto comparado for igual a este objeto, um número negativo, se este objeto for menor que objeto dado, e um número positivo, se este objeto for maior que o objeto dado. Este método está definido na interface Comparable, que deve ser implementado pela classe que será ordenado em uma lista. Não é necessariamente obrigatório que a classe implemente a interface Comparable, ao chamar o método sort pode também ser passado como parâmetro além da lista que será ordenada um método que fará a ordenação.

Entendemos como à ordenação é feita, mais ainda assim não implementamos a interface Comparable e nenhuma logica para a ordenação. Como a lista pode ser ordenada com o método sort? A resposta é que a classe string já implementa a interface Comparable que ordena em ordem alfabética seus elementos. Outras classes em Java que implementam essa interface são: BigDecimal, BigInteger, Byte, ByteBuffer, Character, CharBuffer, Charset, CollationKey, Date, Double, DoubleBuffer, File, Float, FloatBuffer, IntBuffer, Integer, Long, LongBuffer, ObjectStreamField, Short, ShortBuffer e URI que podem ser ordenadas simplesmente utilizando-se o método sort.

Agora chegamos ao caso se quisermos ordenar uma lista de objetos de uma classe que nós mesmos criamos. Para isso a nossa classe deve implementar a interface Comparable. Utilizaremos como exemplo a classe abaixo chamada carro, que contém apenas dois atributos, cilindrada e cor, e um construtor que recebe esses atributos.

public class Carro {
private String cor;
 private int cilindrada;
public Carro(String cor, int cilindrada) {
 super();
 this.cor = cor;
 this.cilindrada = cilindrada;
 }
public String getCor() {
 return cor;
 }
public void setCor(String cor) {
 this.cor = cor;
 }
public int getCilindrada() {
 return cilindrada;
 }
public void setCilindrada(int cilindrada) {
 this.cilindrada = cilindrada;
 }
 }

Realizaremos agora as modificações necessárias na nossa classe carro para que possamos ordenar uma lista da nossa classe utilizando o método sort. Primeiramente a nossa classe deve implementar a intarface Comparable e consequentemente implementar o método sort, lembrando que este método retorna zero se o objeto é igual, um numero negativo se for menor e um numero positivo se for maior. Iremos também decidir como queremos a ordenação da nossa lista de carros seja feita, a ordenação será feita em ordem decrescente de cilindrada, e em caso de ter igual será ordenado em ordem alfabética de cor. A classe finalizada por ser vista abaixo.

public class Carro implements Comparable {
private String cor;
 private int cilindrada;
public Carro(String cor, int cilindrada) {
 super();
 this.cor = cor;
 this.cilindrada = cilindrada;
 }
public String getCor() {
 return cor;
 }
public void setCor(String cor) {
 this.cor = cor;
 }
public int getCilindrada() {
 return cilindrada;
 }
public void setCilindrada(int cilindrada) {
 this.cilindrada = cilindrada;
 }
public int compareTo(Carro carro) {
 if(this.cilindrada > carro.cilindrada){
 return -1;
 }
 else if(this.cilindrada < carro.cilindrada){
 return 1;
 }
 return this.getCor().compareToIgnoreCase(carro.getCor());
 }
 }

Para mostrar que a ordenação realmente funcionou, iremos fazer um teste, onde criaremos uma lista de carros, adicionaremos alguns carros há lista, alguns com mesma cilindradas e cores diferentes. Depois iremos imprimir essa lista de carros, executar o método sort e exibir de novo a lista para ver se a ordenação realmente ocorreu.

List carros = new ArrayList();
carros.add(new Carro("Azul",500));
 carros.add(new Carro("Verde",300));
 carros.add(new Carro("Laranja",700));
 carros.add(new Carro("Marrom",300));
 carros.add(new Carro("Amarelo",700));
for(Carro c : carros){
 System.out.println("Carro de cor "+c.getCor()+" e "+c.getCilindrada()+" cilindradas.");
 }
Collections.sort(carros);
 System.out.println("Ordenando a lista:");
for(Carro c : carros){
 System.out.println("Carro de cor "+c.getCor()+" e "+c.getCilindrada()+" cilindradas.");
 }

Resultado:

Carro de cor Azul e 500 cilindradas.
 Carro de cor Verde e 300 cilindradas.
 Carro de cor Laranja e 700 cilindradas.
 Carro de cor Marrom e 300 cilindradas.
 Carro de cor Amarelo e 700 cilindradas.
 Ordenando a lista:
 Carro de cor Amarelo e 700 cilindradas.
 Carro de cor Laranja e 700 cilindradas.
 Carro de cor Azul e 500 cilindradas.
 Carro de cor Marrom e 300 cilindradas.
 Carro de cor Verde e 300 cilindradas.

Como esperado a ordenação funcionou corretamente. Era isso que este artigo proponha a se tratar, pode ser algo simples para algumas pessoas, mas para quem não conhece pode ser de grande ajuda, facilitando muito o seu trabalho.

Fonte: blog.sippulse.com – Jonas Diogo

jQuery – Introdução à eventos (events) – O método bind()

Introdução à eventos (events)

Eventos em JavaScript são geralmente alguma coisa onde você escreve um pedaço de código ou um nome de uma função dentro de um atributo de evento em uma tag HTML. Por exemplo, você pode criar um evento para um link escrevendo um código assim:

<a href="javascript:void(0);" onclick="alert('Hello, world!');">Test</a>

E claro isso ainda é perfeitamente válido quando se usa jQuery. Porém, usando jQuery, você pode vincular código a um evento de um elemento ainda mais fácil, especialmente em casos onde você quer anexar funções anônimas ou usar o mesmo código para múltiplo eventos, ou ainda o mesmo código para múltiplos eventos de múltiplos elementos. Com por exemplo, você pode vincular o mesmo evento para todos os links e tags span no seu documento, com apenas algumas linhas de código assim:

<script type="text/javascript">
$(function()
{
        $("a, span").bind("click", function() {
                alert('Hello, world!');
        });
});
</script>

Nós usamos o método bind, que é essencial quando trabalhamos com eventos e jQuery.

O método bind()

Um dos aspectos mais importante de lidar com eventos através do jQuery são os métodos bind() e unbind(). Como o nome sugere, eles vão simplesmente anexar e desanexar código a um ou vários eventos em um conjunto de elementos. Nós vimos um exemplo de uso muito simples do método bind() na introdução à eventos, e aqui está um mais completo:

<a href="javascript:void(0);">Test 1</a>
<a href="javascript:void(0);">Test 2</a>
<script type="text/javascript">
$(function()
{
        $("a").bind("click", function() {
                alert($(this).text());
        });
});
</script>

Isso funciona selecionando todos os links (elementos <a>) e então vinculamos a função anônima que você vê ao evento click. Uma pequena característica legal é que o jQuery irá automaticamente atribuir o elemento que é clicado, à palavra-chave “this” dentro da função anônima. Isso irá permitir você acessar o elemento que ativa o elemento, mesmo quando você atribuir o mesmo código para múltiplos elementos.

Quando o jQuery chama seu método, ele irá passar informação sobre o evento como primeiro parâmetro, se você especificou um ou mais parâmetro nele. Por exemplo, o objeto de evento passado irá conter informação sobre onde o cursor do mouse está, qual tipo de evento é, qual tecla do teclado ou botão do mouse foi apertado (se algum) e muito mais.
Você pode ver todas as propriedades e métodos do objeto de evento aqui: http://api.jquery.com/event.which/

Aqui está um exemplo:

<div id="divArea" style="background-color: silver; width: 100px; height: 100px;">
</div>
<script type="text/javascript">
$("#divArea").bind("mousemove", function(event)
{
        $(this).text(event.pageX + "," + event.pageY);
});
</script>

Nós criamos um elemento div de um tamanho razoável e uma cor de fundo. Para essa div, nós vamos subscrever ao evento mousemove, com uma função anônima com um parâmetro chamado “event”. Esse objeto nos dá acesso as propriedades pageX e pageY, que nos diz onde na página o cursor do mouse está atualmente, referente ao canto superior esquerdo do documento. Tente o exemplo e mova o cursor sobre o elemento div e você verá as coordenadas atualizadas conforme você move o mouse.

O método bind() também permite você passar dados por contra própria e acessá-lo pelo objeto de evento. Isso também permite você atribuir valores na hora que você vincular o evento, e estar apto para ler esse valor na hora que esse evento é invocado, apesar de a variável original que você usou pode ter mudado. Aqui está um exemplo onde você pode ver isso:

<a href="javascript:void(0);">Test 1</a>
<a href="javascript:void(0);">Test 2</a>
<script type="text/javascript">
var msg = "Hello, world!";
$(function()
{
        $("a").bind("click", { message : msg }, function(event) {
                msg = "Changed msg";
                alert(event.data.message);
        });
});
</script>

Nós passamos o valor como parâmetro secundário do método bind(), como um mapa do tipo chave-valor. Você pode passar mais de um valor separando eles por vírgulas. Para acessar o valor dentro do event handler, nós usamos a propriedade de dados do objeto evento. Essa propriedade contém sub-propriedades para cada um dos valores que você passou, que significa que você pode acessar o valor do parâmetro “message” usando evento.data.message.

Apesar do fato que nós mudamos o valor da variável “msg” dentro do event handler, a mensagem mostrada será ainda “Hello, world!” toda vez que você clicar em um dos links, porque é avaliada assim que o event handler está vinculado, que é depois que a página foi carregada.

Fonte: jquery-tutorial.net / jquery-tutorial.net

jQuery – Os métodos remove() e empty()

Nos últimos dois capítulos, nós trabalhamos com adicionando novos elementos a uma página, mas claro que o jQuery pode ajudar você a remover eles também. Existem principalmente dois métodos para isso: remove() e empty(). O método remove() irá deletar o(s) elemento(s) selecionado(s), enquanto o método empty() irá apenas deletar todos os elementos filhos do(s) elemento(s) selecionado(s). O seguinte exemplo deve ilustrar a diferença – tenha certeza de clicar os links na ordem certa:

<a href="javascript:void(0);" onclick="$('#divTestArea1').empty();">empty() div</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea1').remove();">remove() div</a>
<div id="divTestArea1" style="height: 100px; width: 300px; padding: 20px; border: 1px solid silver; background-color: #eee;">
        <b>Bold text</b>
        <i>Italic text</i>
</div>

O primeiro link irá chamar o método empty() na nossa div de teste, removendo todos os elementos filhos. O segundo link irá remover a div inteira, incluindo qualquer elemento filho. Coisa muito simples.

O método remove() vem com um parâmetro opcional, que permite você filtrar os elementos a serem removidos, usando qualquer uma das sintaxes dos seletores do jQuery. Você pode com certeza realizar o mesmo simplesmente fazendo o filtro no seu primeiro selector, mas em algumas situações, você pode estar trabalhando com um conjunto de elementos já selecionados. Veja esse exemplo disso em uso:

<a href="javascript:void(0);" onclick="$('#divTestArea2 b').remove('.more');">remove() more bold</a>
<div id="divTestArea2" style="height: 100px; width: 300px; padding: 20px; border: 1px solid silver; background-color: #eee;">
        <b>Bold text</b><br />
        <b>More bold text</b><br />
        <b>Even more bold text</b><br />
</div>

Nós começamos selecionando todas as tags bold (negrito) dentro da nossa div de teste. Nós então chamamos o método remove() nos elementos selecionados, e passamos no filtro “.more”, que irá certificar-se que nós apenas peguemos elementos que usam a classe “more”. Como resultado, apenas os últimos dois textos em negrito serão removidos.

Você pode com certeza usar ainda seletores mais avançados como filtro também. Dê uma olhada no tópico “Seletores” para mais inspiração.

Fonte: jquery-tutorial.net

jQuery – Os métodos before() e after()

No capítulo anterior, nós usamos os métodos append() e prepend() para inserir coisas dentro de um elemento, mas em alguns casos, nós precisamos inserir coisas antes ou depois de um ou vários elementos em vez disso. O jQuery tem os métodos befoer() e after() apenas para esse propósito, e eles são tão fáceis de usar. Veja esse exemplo:

<a href="javascript:void(0);" onclick="$('input.test1').before('<i>Before</i>');">Before</a>   
<a href="javascript:void(0);" onclick="$('input.test1').after('<b>After</b>');">After</a>
<br /><br />
<input type="text" value="Input 1" name="txtInput1" /><br />
<input type="text" value="Input 2" name="txtInput2" /><br />

Dependendo em qual dos dois links você clicou, uma tag itálico ou uma negrito será inserida antes ou depois de cada elemento input na página usando a classe “test1”. Assim como append() e prepend(), ambos after() e before() permitem você usar strings HTML, elementos DOM e objetos jQuery como parâmetros e uma quantidade infinita deles também. Nós vamos demonstrar isso no próximo exemplo:

<a href="javascript:void(0);" onclick="InsertElements();">Insert elements</a>
<br /><br />
<span id="spnTest2">Hello world? </span>
<script type="text/javascript">
function InsertElements()
{
        var element1 = $("<b></b>").text("Hello ");
        var element2 = "<i>there </i>";
        var element3 = document.createElement("u");
        element3.innerHTML = "jQuery!";   
        $("#spnTest2").after(element1, element2, element3);
}
</script>

Neste exemplo, nós criamos um objeto jQuery, uma string HTML e um elemento JavaScript DOM, e então nós usamos o método after() para inserir todos eles depois da nossa tag span. Claro, o método before() poderia ter sido usado exatamente da mesma maneira.

Existem variações dos métodos before() e after(), chamados insertBefore() e inserAfter(). Eles fazem praticamente a mesma coisa, mas eles fazem isso ao contrário, então ao invés de os chamarem nos elementos que devemos inserir dados antes ou depois, com um parâmetro do que é para ser inserido, você faz exatamente o oposto. Qual método usar obviamente depende da situação, mas aqui está um exemplo mostrando a você como usar ambos:

<a href="javascript:void(0);" onclick="InsertElementsBefore();">Insert elemenets</a>
<br /><br />
<span id="spnTest3">Hello world? </span>
<script type="text/javascript">
function InsertElementsBefore()
{       
        $("#spnTest3").before($("<i></i>").text("before() "));
        $("<b></b>").text("insertBefore() ").insertBefore("#spnTest3");
}
</script>

Neste exemplo, nós inserimos os itens antes da tag span, mas você poderia com certeza fazer exatamente a mesma coisa usando after() e insertAfter(), se você deseja inserir depois do elemento alvo. Como você pode ver, o resultado é o mesmo – apenas a ordem do que nós fazermos difere.

Fonte: jquery-tutorial.net

jQuery – Os métodos append() e prepend()

Adicionar novos objetos a um element existente é muito fácil com jQuery. Aqui estão métodos para anexar ou prefixar, recebendo HTML em formato string, elementos DOM e ojbetos jQuery como parâmetros. No próximo exemplo, você verá como é fácil inserir novos elementos em uma lista, usando ambos os métodos append() e prepend():

<a href="javascript:void(0);" onclick="$('#olTestList1').append('<li>Appended item</li>');">Append</a>   
<a href="javascript:void(0);" onclick="$('#olTestList1').prepend('<li>Prepended item</li>');">Prepend</a>
<ol id="olTestList1">
        <li>Existing item</li>
        <li>Existing item</li>
</ol>

Nós temos dois links: O primeiro irá anexar um item a lista, significando que o novo item será inserido como último item. O outro link irá prefixar um link a lista, o que significa que o novo item será inserido como o primeiro item da lista. Neste exemplo, nós simplesmente inserimos um pedaço de HTML, mas nós poderíamos  ter gerado os novos itens com jQuery também, ou criado eles através do código JavaScript padrão e elementos DOM. De fato, ambos os métodos append() e prepend() recebem uma quantidade infinita de novos elementos como parâmetros. No próximo exemplo, nós vamos demonstrar isso também como a habilidade para adicionar elementos de várias formas:

<a href="javascript:void(0);" onclick="AppendItemsToList();">Append items</a>   
<ol id="olTestList2"></ol>
<script type="text/javascript">
function AppendItemsToList()
{
        var item1 = $("<li></li>").text("Item 1");
        var item2 = "<li>Item 2</li>";
        var item3 = document.createElement("li");
        item3.innerHTML = "Item 3";
        
        $("#olTestList2").append(item1, item2, item3);
}
</script>

Como você pode ver, o item1 é um elemento gerado por jQuery, o item2 é uma simples string HTML e o item3 é um elemento gerado por JavaScript DOM.Todos eles foram anexado a lista usando a mesma chamada e claro isso deveria funcionar para o método prepend() também.

Existem variações dos métodos append() e prepend(), chamados appendTo() e prependTo(). Eles fazem praticamente a mesma coisa, mas eles fazem isso ao contrário, então em invés de os chamarem nos elementos que você deseja anexar/prefixar, com um parâmetro do que é para ser anexado/prefixado, você faz exatamente o oposto. Qual usar obviamente depende da situação, mas aqui está um exemplo mostrando a você como usar ambos:

<a href="javascript:void(0);" onclick="PrependItemsToList();">Prepend items</a>   
<ol id="olTestList3"></ol>
<script type="text/javascript">
function PrependItemsToList()
{       
        $("#olTestList3").prepend($("<li></li>").text("prepend() item"));
        $("<li></li>").text("prependTo() item").prependTo("#olTestList3");
}
</script>

Neste exemplo, nós prefixamos os itens, mas você poderia com certeza fazer a mesma coisa usando append() e appendTo(). Como você pode ver, o resultado é o mesmo – apenas a ordem do que nós fazemos difere.

Fonte: jquery-tutorial.net