Comment insérer une image dans du HTML via JQuery?

Question

Voici la situation. J'ai un lien standard comme celui-ci:

<h2><a href="#">Link Title</a></h2>

Maintenant, je veux insérer un arrière-plan pour qu'il ressemble à un bouton, alors j'ajoute une étendue avec JQuery comme suit:

$(document).ready(function()
{
      $(".post a").wrapInner("<span></span>");
});

(Le code HTML pour le lien est disponible ici, http://flickrental.co.uk/ - Au fait, ce n’est pas le site, mais le code du lien)

Je peux maintenant transformer le lien en un "bouton" plus agréable. et je suis assez heureux ... Mais j’avais une autre pensée: si je pouvais ajouter une petite image de flèche à l’intérieur du lien (à droite du texte) (ce site est un site affilié et le bouton devrait augmenter le CTR ainsi que l'image de la flèche)

Mais je n'arrive pas à trouver la bonne syntaxe pour le faire.

Des idées?

Answer 1

Vous devriez probablement ajouter la flèche avec css. Avec une flèche de 10 pixels de large:

.post a {
    padding-right: 10px;
    background: url(arrow.png) no-repeat right 50%;
}

Mais si vous utilisez déjà l'image d'arrière-plan pour autre chose, vous pouvez ajouter l'image avec jquery:

$("<img src='arrow.png'/>").prependTo(".post a");

Je suppose de votre question que vous n’avez pas accès à une modification directe du code HTML. Sinon, ce serait probablement la meilleure solution.