Como inserir uma imagem em alguns html através de JQuery?
Pergunta
Aqui está a situação. Eu tenho um link padrão assim:
<h2><a href="#">Link Title</a></h2>
Agora, eu quero inserir um fundo para torná-lo parecido com um botão, então eu adicionar um span com JQuery assim:
$(document).ready(function()
{
$(".post a").wrapInner("<span></span>");
});
(o HTML para o link pode ser encontrado aqui, http://flickrental.co.uk/ - a propósito, este não é o local, apenas o código para o link)
Agora eu posso transformar o link em um "botão" mais agradável e estou muito feliz ... Mas tive outro pensamento, e se eu poderia adicionar uma imagem pequena seta dentro do link (Para a direita do texto) (Este site é um site afiliado e o botão deve aumentar o CTR, bem como a imagem de seta)
Mas eu não consigo encontrar a sintaxe direito de fazer isso.
Todas as idéias?
Solução
Você provavelmente deve adicionar a seta com css. Dado um pixel 10 de largura arrow:
.post a {
padding-right: 10px;
background: url(arrow.png) no-repeat right 50%;
}
Mas se você já está usando a imagem de fundo para outra coisa, você pode adicionar a imagem com jQuery:
$("<img src='arrow.png'/>").prependTo(".post a");
Presumo de sua pergunta que você não tem acesso para alterar o código HTML diretamente. Caso contrário, isso provavelmente seria a melhor solução.