JQuery ajoute à un élément son propre contenu

Question

Je devrais ajouter un élément <span> à un élément d'ancrage, avec son contenu. Comme ceci:

<div class="button"><a href="#">content text</a></div> 

Je en ai besoin:

<div class="button"><a href="#">content text<span>content text</span></a></div> 

J'essaie dans jQuery, mais je ne peux pas mettre le contenu:

$('.butt a').append('<span>'+???+'</span>'); 

S'il vous plaît aidez-moi, si vous le pouvez ! Je vous remercie!

Answer 1

Vous pouvez passer une fonction à .append(), comme ceci:

$('.button a').append(function(i, html) { return '<span>'+html+'</span>'; }); 

You can test it out here, ou un peu plus sûr approche DOM (ce que je partirais avec):

$('.button a').append(function(i, html) { return $('<span />',{html:html}); }); 

You can test that version here. Dans les deux cas ci-dessus le html la fonction reçoit le html/texte courant dans le <a> que vous ajoutez à ... ce qui fonctionne parfait ici.

Answer 2

Votre problème est que vous essayez de sélectionner la classe butt - mais votre classe est button:

$('.button a').append('<span>Your span text here</span>');