JQuery - Comment ajouter une seule balise html à un code HTML?

Question

Je veux insérer un seul < durée > avant que le texte ci-dessous (à droite avant LINK):

<li><a href="">LINK</a></li> 

Ainsi, le ci-dessus devient

<li><a href=""><span>LINK</a></li> 

Voici mon JQuery code:

$('#mainnav li a').prepend('<span>'); 

Lorsque je v Voir le code dans firebug après, je vois <span></span>, comment puis-je obtenir la balise span span et pas la balise de fermeture?

Answer 1

Tout d'abord, ce que vous voulez est malformé HTML. jQuery va rendre difficile, voire impossible, de créer cela. Je suggère de le faire en une seule étape plutôt que plusieurs. Essayez:

$("li > a").each(function() { 
    $(this).contents().wrapAll("<span>"); 
}); 

Entrée:

<ul> 
    <li><a href="...">testing</a></li> 
    <li><a href="...">rich <b>content</b> with <i>inner tags</i></a></li> 
</ul> 

Sortie:

<ul> 
    <li><a href="..."><span>testing</span></a></li> 
    <li><a href="..."><span>rich <b>content</b> with <i>inner tags</i></span></a></li> 
</ul> 

Answer 2

Lorsque vous utilisez prepend, vous n'ajoutez pas de texte de balisage à la page, vous ajoutez éléments à la page. Les éléments n'ont pas de balises "start" et "end", les éléments sont des éléments. Si vous voulez emballer un tas d'éléments dans un span (je devine que c'est ce que vous voulez, si vous voulez insérer le début d'un endroit et la fin d'un autre), vous devez ajouter l'intervalle à le conteneur, puis déplacez les éléments à l'intérieur.

Par exemple, cela déplace tous les liens de l'élément foo et les déplace dans une travée à l'intérieur container:

var stuff; 
var container; 

stuff = $('#foo a'); 
span = $("<span style='background-color: yellow'>"); 
span.append(stuff); 
$('#container').append(span); 

Answer 3

Je ne sais pas pourquoi vous le voulez, mais il peut être fait de cette façon,

$('#mainnav li a').html(function(i,v){ 
    return '<span>' + v; 
}) 

Answer 4

De nombreuses méthodes jQuery sont conçues pour créer automatiquement des éléments à partir de la moitié seulement Pour les balises écrites, comme "<span>" pour un .prepend(), un élément span entier sera ajouté au DOM. Ou, comme vous le verrez dans Firebug, "<span></span>" inséré d'abord dans l'élément d'ancrage.

Je ne vois pas pourquoi vous voulez créer HTML invalide, mais si vous devez, vous pouvez le faire de cette façon:

$("li > a").html("<span>"+$("li > a").html()); 

Ou, comme le suggère Reigel, avec une fonction anonyme au méthode .html() (je l'ai écrit ma réponse assez rapidement et, évidemment, unthoughtfully):

$("li > a").html(function (idx, html) { 
    return "<span>" + html; 
}); 

Sinon, il pourrait sembler que vous voulez envelopper le contenu de l'élément d'ancrage dans une travée.Dans ce cas, vous devriez plutôt utiliser l'un des jQuerywrappingmethods:

$("li > a").wrap("<span>"); 

Vous n'êtes pas censé créer à la fois l'élément de départ et l'élément de fermeture vous (lorsque vous utilisez jQuery).

Answer 5

J'ai rencontré un problème où j'utilisais une API tierce qui utilisait php curl pour placer du HTML plat dans ma page Web. Dans l'api HTML qui a été retourné, il y avait des balises span malformées qui venaient de tuer mon rendu dans IE. J'ai utilisé la fonction replaceWith() de Jquery pour résoudre le problème. Voici un exemple:

malformée HTML: (notez la balise span non ouvert)

<a class="aa_float_right aa_navlink" href="http:whatever">My Account</a></span> 

Ma solution:

$('.aa_navlink').replaceWith('<span class="test"><a class="aa_float_right aa_navlink" href="http:whatever">My Account</a>'); 

résultant HTML:

<span class="test"><a class="aa_float_right aa_navlink" href="http:whatever">My Account</a></span> 

BOOM nous avons maintenant bien formé HTML non merci si minable API tiers (et je veux dire vraiment merdique).

Ce correctif m'a été donné par les développeurs à SaltWater Co.