JQuery - 如何将单个 html 标签添加到某些 html？

Posted 2023-04-13

【中文标题】JQuery - 如何将单个 html 标签添加到某些 html？

【英文标题】：JQuery - How to add a single html tag to some html?

【发布时间】：2010-05-11 09:54:22

【问题描述】：

我只想在下面的文本之前插入一个 （就在 LINK 之前）：

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

所以，上面变成了

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

这是我的 JQuery 代码：

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

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

【问题讨论】：

嗯....为什么要创建格式错误的 html？

好吧，我将添加结束标记，我需要先整理开始标记：|

您应该重新考虑您的设置。如果它依赖于创建格式错误的 HTML，那么它可能应该被重写为更可靠的东西（和 XML/HTMLish）。还是您向我们隐瞒了具体原因？

【参考方案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>

【参考方案2】：

我遇到了一个问题，我在使用 3rd 方 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，不，谢谢这么糟糕的第 3 方 API（我的意思是真的很糟糕）。

此修复程序是 SaltWater Co. 的开发人员提供给我的

【参考方案3】：

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

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

【参考方案4】：

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

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

var stuff;
var container;

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

【参考方案5】：

许多 jQuery 方法旨在自动从只写一半的标签创建元素，例如，"<span>" 用于 .prepend() 将导致整个 span 元素添加到 DOM。或者，正如您在 Firebug 中看到的那样，"<span></span>" 首先插入到锚元素中。

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

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

或者，正如 Reigel 所建议的那样，使用 .html() 方法的匿名函数（我很快就写下了我的答案，显然，没有经过深思熟虑）：

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

否则，您可能希望将锚元素的内容包装在一个跨度中。在这种情况下，您应该改用 jQuery wrapping methods 之一：

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

您并不打算自己创建开始元素和结束元素（使用 jQuery 时）。