JQuery - 如何在一些html中添加单个html标签？

Question

我想在下面的文本之前插入一个<span> （在LINK之前）：

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

所以，上面变成了

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

这是我的JQuery代码：

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

当我在firebug中查看代码之后，我看到<span></span> ，我如何获得开始span标记而不是结束标记？

Answer 1

首先，你想要的是格式错误的HTML。 jQuery即使不是不可能创建它也会变得困难。 我建议只用一步而不是多步。 尝试：

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

输入：

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

输出：

<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

我遇到了一个问题，我正在使用第三方API，它使用php curl将平面HTML放入我的网页。 在api HTML中返回的是一些格式错误的span标签，它们只是在IE中删除了我的渲染。 我使用Jquery的replaceWith（）函数来解决问题。 下面是一个例子：

格式错误的HTML :(注意未打开的span标记）

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

我的解决方案

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

产生的HTML：

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

BOOM我们现在已经很好地形成了HTML，不用谢谢这么糟糕的第三方API（我的意思是真的很糟糕）。

SaltWater公司的开发人员给了我这个修复程序。

Answer 3

我不知道你为什么要它，但它可以这样做，

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

Answer 4

当您使用prepend ，您不会向页面添加标记文本，而是向页面添加元素 。 元素没有“开始”和“结束”标记，元素是元素。 如果你想在一个span包装一堆元素（我猜这是你想要的，如果你想在一个地方插入它的开头而在另一个地方插入它的结尾），你需要添加跨度到容器然后将元素移入其中。

例如，这会将所有链接移出元素foo并将它们移动到container内的span container ：

var stuff;
var container;

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

Answer 5

许多jQuery方法被设计为仅从半写标签自动创建元素，例如，对于.prepend（）， "<span>"将导致整个span元素被添加到DOM。 或者，正如您在Firebug中看到的那样， "<span></span>"首先插入到锚元素中。

我不明白你为什么要创建无效的HTML，但如果必须，你可以这样做：

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

或者，正如Reigel建议的那样，使用.html（）方法的匿名函数（我很快就写了我的答案，很明显，非常有意思）：

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

否则，您似乎想要在span中包装anchor元素的内容。 在这种情况下，您应该使用其中一个jQuery 包装 方法 ：

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

你不是要自己创建起始元素和结束元素（使用jQuery时）。