如何使用 jQuery 在 link 标签内添加跨度？

Question

我在 HTML 中有此代码：

<a class="cta" href="URL" target="_blank">TEXT</a>

我试图实现的是在 link 标签内添加一个 span 标签，这样它看起来像这样：

<a class="cta" href="URL" target=_"blank"><span>TEXT</span></a>

我尝试使用前缀，但它似乎不适合我的情况……

Answer 1

你必须先获取内容，然后将当前替换为你制作的另一个！您可以使用像 $(".myClass") 这样的类选择器，然后在所选目标上使用 $(".myClass").html("<p>My new HTML content</p>"); 方法替换文本：

$(document).ready(function() {
    $(".cta").html("<span>" + $(".cta").html() + "</span>");
});

这是一个 JSFiddle 以查看实际效果

Answer 2

尝试以下操作：

$('a.cta').each(function(){
var text = $(this).text();//take the text from the link
$(this).html($('<span>',{text:text}));//create a span tag and append the text in it after that use html to append the span to the link tag
});

$('a.cta').each(function(){
var text = $(this).text();//take the text from the link
$(this).html($('<span>',{text:text}));//create a span tag and append the text in it after that use html to append the span to the link tag
})

span { color: red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cta" href="URL" target="_blank">TEXT</a>
<a class="cta" href="URL" target="_blank">TEXT2</a>
<a class="cta" href="URL" target="_blank">TEXT3</a>

Answer 3

替换html():

$(function() {
   $('.cta').html( '<span>'+$('.cta').html()+</span>' );
});

Answer 4

在jquery

中使用.wrapInner()

Description: Wrap an HTML structure around the content of each element in the set of matched elements.

 var con = $('.cta').text();
 $(".cta").empty().wrapInner("<span>"+con+"</span>");

http://api.jquery.com/wrapinner/

Answer 5

.html( function ) 是改变元素 html 内容的好方法。当前 html 元素内容设置在 html 函数变量中，您可以在新添加的子项中设置它。

$("a.cta").html(function(i, html){
  return "<span>"+ html +"</span>";
});

span { color: red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cta" href="URL" target="_blank">TEXT</a>
<a class="cta" href="URL" target="_blank">TEXT 2</a>

Answer 6

使用 jQuery 的 .wrapInner( wrappingElement ):

$(".cta" ).wrapInner("<span></span>");

Description: Wrap an HTML structure around the content of each element in the set of matched elements.

The .wrapInner() function can take any string or object that could be passed to the $() factory function to specify a DOM structure. This structure may be nested several levels deep, but should contain only one inmost element. The structure will be wrapped around the content of each of the elements in the set of matched elements.

Source: https://api.jquery.com/wrapInner/

如何使用 jQuery 在 link 标签内添加跨度？

How to add a span inside a link tag with jQuery?

html

javascript

anchor

jquery

hyperlink